Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Images are being loaded twice

See original GitHub issue

I 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