Chrome makes two requests for each image

[zdfs]

I'm not sure how to duplicate this. When I viewed the lazy load examples in Chrome, everything was working correctly. When I viewed the examples on the lazy load documentation site, everything worked correctly.

But for some reason, in my particular environment, Chrome was making two requests for each image lazy loaded. I am using Zurb Foundation as a base for my toolkit, and I wanted to add the lazy load plugin to our assets. In my demonstration page, I consistently duplicated this problem even though I followed the most basic example correctly.

Looking through the code, I finally changed this block

$("<img />")
    .bind("load", function() {
        var original = $self.data(settings.data_attribute);
        $self.hide();
        if ($self.is("img")) {
            $self.attr("src", original);
        } else {
            $self.css("background-image", "url('" + original + "')");
        }
        $self[settings.effect](settings.effect_speed);

        self.loaded = true;

        /* Remove image from array so it is not looped next time. */
        var temp = $.grep(elements, function(element) {
            return !element.loaded;
        });
        elements = $(temp);

        if (settings.load) {
            var elements_left = elements.length;
            settings.load.call(self, elements_left, settings);
        }
    })
    .attr("src", $self.data(settings.data_attribute));

to this

$("<img />")
    .bind("load", function() {
        var original = $self.data(settings.data_attribute);
        $self.hide();
        if ($self.is("img")) {
            $self.attr("src", original);
        } else {
            $self.css("background-image", "url('" + original + "')");
        }
        $self[settings.effect](settings.effect_speed);

        self.loaded = true;

        /* Remove image from array so it is not looped next time. */
        var temp = $.grep(elements, function(element) {
            return !element.loaded;
        });
        elements = $(temp);

        if (settings.load) {
            var elements_left = elements.length;
            settings.load.call(self, elements_left, settings);
        }
    }).load();

It seemed like calling the load() function after it was bound was a better solution than modifying the src attribute a second time. Load() already does that and it keeps track of which images are already loaded.

Everything seems to work the same, but I wanted to mention my issue here to make sure I'm not just missing something. Thanks.

[tuupola]

Do you have an example page online where the double loading problem occurs?

Original code does not modify src attribute of the same element twice. Instead the code makes a new img element which is not attached to DOM and sest the src of this image to data-original. When this image is loaded it then changes the src of the lazy loaded image in DOM.

So apparently in your case cache gets confused somehow.

[zdfs]

I'll have to set something up.

[zdfs]

Ok. I'm going to close this. I reverted my changes and things seem to be fine. Not sure how I got myself in this particular state.

[tuupola]

@zdfs check #151. Do you still have the problematic setup somewhere? It would be interesting to see response headers of the images which loaded twice.

[lc-nyovchev]

I have exactly the same thing using chrome Version 51.0.2704.63 (64-bit). It says it makes one request in the Network tab but I actually get two requests with slightly different headers.