Lazyload background-image with lazysizes

javascript jquery jquery-lazyload
Daiaiai picture Daiaiai · Nov 8, 2017 · Viewed 20.3k times · Source

I want to load a background-image "lazy" with the library http://afarkas.github.io/lazysizes/
They do mention that the loading of "anything" lazily is possible. But the whole documentation on that is that one:

<div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload">
    <!-- widget content -->
<div>

And I don't get how I could use that for a background-image. Does anybody have experience there on that?

Answer

Panos Spiliotis picture Panos Spiliotis · Apr 26, 2018

To load a background image using lazysizes use the data-bg attribute

import "lazysizes/plugins/unveilhooks/ls.unveilhooks";

Usage example:

<div class="lazyload" data-bg="/path/to/image.jpg"></div>

Related questions

How to get data-src attribute with jquery?

Actually I want to do when I hover off the first image must be appear again I want to share my structure with you <div class="tur-list-box"> <div class="tur-list-content"> <figure> <img data-src="…

Read More
How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More
Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

Mod note: This question is about why Postman is not subject to CORS restrictions in the same way an XMLHttpRequest is. This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error. Please stop posting: CORS configurations for every …

Read More