Lazy loading images

Question

I'm looking for a JQuery plugin that supports lazy loading images. The Lazy Load JQuery plugin is no longer supported and does not work in Firefox.

Does anyone know a good alternative that supports most modern browsers?

I'm also open to other approaches. I have a hidden div with images that I don't want to load unless the div is made visible. Let me know if there are better approaches to deferring the image load in this situation.

Answer 1

I encountered a similar situation in a tab style page where the content in initially invisible tabs was downloading unnecessarily. The solution I went with was to create markup like:

<img src="#" data-src="/img/foo.png"/>

and then in the javascript that handles the tab transitions I also substituted the "data-src" attribute into the "src" attribute of those images.

$thisTab.find('img[data-src]').each(function(img) {
    var $img = $(img);
    $img.attr('src', $img.attr('data-src'))
        .removeAttr('data-src');
});

This accomplishes the goal of only loading the images when the tab is selected, and is valid html5!

Answer 2

I was having an issue with it not working in FF as well, but I got it working when I filled out the initial src attribute value with an image, like Monsieur Tuupola does on this example page, where he uses a 1px x 1px gray gif image for a place holder:

http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

Fire 'er up in FF, and it'll work.

Answer 3

I am pretty certain that Javascript is a bit overkill and a wee bit backwards (especially if using jQuery without the defer="" attribute on the script) since it does take time for the javascript to get parsed and executed. Instead, use the decoding attribute set to async like so.

<img src="/path/to/file.jpg" decoding="async"></img>

Also, I am assuming that the most likely reason for why you want to lazyload images is to make your website load faster. If this is the case, then you can make your website load a huge amount even faster simply by converting your images to jpegs and compressing them with compressor.io/JPEGmini (upload your jpeg file to both and use whichever turns out smaller after compression).

Next, while full support in all browsers is not there yet, more and more browsers are starting to support it. I for one prefer to take the practical approach of making my websites full of the fast new features, and taking a backseat while my website grows faster with more supporting browsers, instead of spending vast amounts of time making my website load fast on old outdated browsers just to accommodate a small percentage of my users who really should update their browser more often.

Answer 4

I know the dev says it's not working but I'm using LazyLoad on a project right now and it works fine in FF (I'm using Firefox 4). It takes about 24seconds to download and set up so give it a go to see if it works for you :)

Answer 5

There is a good lightweight jquery plugin - imgr. Check here https://github.com/agaase/imgr.

It has following main features -

1. Its mobile optimised; so it should work on mobile browsers too.
2. It supports normal image elements and elements with background images.
3. You can either do a lazy load of images as you scroll or the normal way of loading all once the page is loaded.

Answer 6

Found this solution here

<h1>List of 10 alberts</h1>
    <div class="albert_container"></div>
    <div class="loading_albert" style="display:none;"><span>Loading ....</span></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var req = '';
            $(window).scroll(function () {
                console.log(req);
                if (req === 'sent') {
                    return false;
                }
                if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                    req = 'sent';
                    showLoader();
                    setTimeout(function () {
                        fetchAlberts();
                    }, 1000);
                }
            });
            function fetchAlberts() {
                var html = '';
                $.get("/ByKishor/data.php").done(function (response) {
                    var data = JSON.parse(response);
                    for (var i in data) {
                        html += "<div class='albert_child'><b>" + i + "</b> : " + data[i].name + "</div>";
                    }
                    $(".albert_container").append(html);
                    req = '';
                    hideLoader();
                });
            }
            function showLoader() {
                $(".loading_albert").show();
            }
            function hideLoader() {
                $(".loading_albert").hide();
            }
            fetchAlberts();
        });
    </script>

Answer 7

I've just created an example, using jQuery.Lazy, to solve this problem in another way, and then saw that these question was a bit older. ;)

But nevermind, now I would like to show you my solution, even for possible other who want to do something like this.

This example looks big on the first view, but it is mostly the creation of the example structure. The most interessting line is the .update() call on the plugin.

lazy.update();

After a tab change we force the plugin to update the view by this line. Everything else is managed automatically. Pretty easy imo.

The working example can be found below. If you like to play with it, I created a jsFiddle too.

// create a lazy instance
var lazy = $("img").lazy({
    chainable: false,
    visibleOnly: true,
    appendScroll: $("#content div"),
    // below config is just for demo purpose
    threshold: 0,
    afterLoad: function(e) {
        var image = e.attr("src").match(/tab\+(.*)\: image (\d)/g)[0];
        console.log(image.replace("+", " ").replace("%20", " "));
    }
});

// your tab controller
$("#header li").click(function() {
    $("#content div").hide().eq($(this).index()).show();
    // update lazy instance after tab change manually
    lazy.update();
});

html * {
  margin: 0;
  padding: 0;
}
ul#header {
  list-style: none;
  margin: 10px 10px 0;
}
ul#header li {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 4px 10px;
  margin-right: 10px;
}
ul#header li:hover {
  cursor: pointer;
  color: #f00;
}
div#content div {
  display: none;
  width: 520px;
  height: 350px;
  overflow: auto;
  background: #ccc;
  padding: 10px;
  border: 1px solid #000;
  margin-left: 10px;
}
div#content div img {
  width: 500px;
  height: 200px;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>
<ul id="header">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<div id="content">
  <div style="display: block;">
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 1" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 2" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 3" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 4" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 5" />
  </div>
  <div>
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 1" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 2" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 3" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 4" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 5" />
  </div>
  <div>
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 1" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 2" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 3" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 4" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 5" />
  </div>
</div>

Answer 8

    <img src="#" data-src="/img/foo.png"/>
    .........................................................................
    $('img[data-src]').each(function() {
        $(this).attr('src', $(this).attr('data-src')).removeAttr('data-src');
    });