Question

I have a plugin which loads images after document ready.

In order for it to work, the image source looks like this:

The script shows the loader.gif until the image is loaded and then replaces that gif with the_actual_image.jpg

Here is how I call the function:

function mylazyload() {
    $("img.lazy").show();
    var timeout = setTimeout(function(){$(".models img.lazy").lazyload({effect : "fadeIn"})}, 800);
}

I have a re-size function which I call after the mylazyload(); function:

jQuery(document).ready(function($){      
    mylazyload();
    resize_images();
});

Here is the re-size function:

function resize_images() {
    var maxHeight = $(".defx img").height();
    $(".model img.lazy").each(function() {
        var $this = $(this);
        if ($this.height() > maxHeight || $this.height() < maxHeight) {
            $this.removeAttr('style').css("height","auto");
            $this.css('height', maxHeight);
        }
    });
}

The PROBLEM is that the resize function seems to work on the loader.gif, not resizing the_actual_image.jpg.

Any ideas why?

Answer 1

1:

Your lazy load is asynchronous and have a timeout on it. Therefore if you call like this:

lazyload();
resize();

The resize function will occour before the lazyload is even triggered.

2:

If you do:

setTimeout(
   function() {
    $(".models img.lazy").lazyload({effect: "fadeIn"});
    resize();
   },
   800
);

I think it will work in localhost, but it’s not gonna work in production, because browsers load images asynchronous too.

3:

So what you need is a callback in the lazyload function. Maybe the library you use have it implemented like:

$(".models img.lazy").lazyload({
      effect: "fadeIn",
      callback: resize()
});

But I’m not sure. You have to look for it and if you dont find write your own lazy loading or change for another library.

4:

Based on the response that you found:

setTimeout(
    function() {
        $(".models img.lazy").lazyload({
            effect: "fadeIn",
            load: function () {
                resize_images();
            }
        });
    },
    800
);