Images are being loaded twice
See original GitHub issueI have a list (ul/li) of thumbnails. After it rendered I execute lazyload:
$element.find("img.lazy").lazyload({ effect: "fadeIn", threshold: 100 });
On Network tab in Chrome (I also checked in Fiddler) I can see that every url are loaded twice. First time with stack:
jQuery.extend.attr @ jquery.js:4380
jQuery.extend.access @ jquery.js:875
jQuery.fn.extend.attr @ jquery.js:4058
(anonymous function) @ jquery.lazyload.js:130
jQuery.fn.extend.on.fn @ jquery.js:5645
jQuery.event.dispatch @ jquery.js:5095
$event.dispatch @ jquery.event.drag-2.2.js:374
jQuery.event.add.elemData.handle @ jquery.js:4766
jQuery.event.trigger @ jquery.js:5007
(anonymous function) @ jquery.js:5691
jQuery.extend.each @ jquery.js:657
jQuery.fn.jQuery.each @ jquery.js:266
jQuery.fn.extend.trigger @ jquery.js:5690
(anonymous function) @ jquery.lazyload.js:48
jQuery.extend.each @ jquery.js:657
jQuery.fn.jQuery.each @ jquery.js:266
update @ jquery.lazyload.js:38
(anonymous function) @ jquery.lazyload.js:81
jQuery.event.dispatch @ jquery.js:5095
$event.dispatch @ jquery.event.drag-2.2.js:374
jQuery.event.add.elemData.handle @ jquery.js:4766
and the second time with stack:
jQuery.extend.attr @ jquery.js:4380
jQuery.extend.access @ jquery.js:875
jQuery.fn.extend.attr @ jquery.js:4058
(anonymous function) @ jquery.lazyload.js:111
jQuery.event.dispatch @ jquery.js:5095
$event.dispatch @ jquery.event.drag-2.2.js:374
jQuery.event.add.elemData.handle @ jquery.js:4766
So it’s all happening in this piece of code:
$("<img />")
.bind("load", function() {
var original = $self.attr("data-" + settings.data_attribute);
$self.hide();
if ($self.is("img")) {
$self.attr("src", original); <<<<<< First load
} 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.attr("data-" + settings.data_attribute)); << Second laod
lazyload’s version: 1.9.1
Issue Analytics
- State:
- Created 10 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Images are loaded twice · Issue #391 · tjoskar/ng-lazyload ...
It looks like every image on the page is loaded twice. No matter if it's in carousel or standard ... Reload the page...
Read more >Loading images sometimes causes image to be loaded twice
It looks like loadComplete() is being hit twice which is confusing because there's a return after it so I don't see how it...
Read more >Duplicate Images are loading i.e. One Image is displaying twice
I am using WP-Appbox to load my Apple App Store iOS and macOS apps on my website. ... Duplicate Images are loading i.e....
Read more >The website has to be loaded twice before the images are ...
Hey reneheg,. All the images on your front page is loading fine on my end, without reloading. How can we reproduce the problem...
Read more >If I use an image twice on the same page, will it increase the ...
... increase in the page load time. The difference will just be the time taken to render the image again on the browser,...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
With Chrome developer, it appears to load twice because the cache is disabled by default.
Enable the cache and the image is loaded only once.
I see. With added Cache-Control header and minimal cache age I have one request per image. Thanks.