Jquery resize function not working when trying to resize images loaded after document ready

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?

lolol · Accepted Answer · 2012-09-05 22:21:11Z

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
);

edited Sep 5, 2012 at 22:21

answered Sep 5, 2012 at 22:02

lolol

4,4203 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

webmasters Over a year ago

Any ideas hot to do it? Ty very much

webmasters Over a year ago

Could this be it? stackoverflow.com/questions/8557720/…

webmasters Over a year ago

Yes, but I am a such a newb:) not sure how to modify my function in order for it to work: console.log($(this)); // Callback here what is this? I am pretty sure I cannot use the jqery each in my resize function now

lolol Over a year ago

But I'm not very sure why you have that timeout function. I'm pretty sure that you don't need it.

webmasters Over a year ago

I have a loading gif and the images are loaded from external urls, I have noticed the site working better with it.

|

Kevin · Accepted Answer · 2012-09-05 22:01:22Z

-1

Your images are not yet loaded on the DOM Ready statement.

Try adding the resize in your timeout as well:

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

answered Sep 5, 2012 at 22:01

Kevin

2221 silver badge5 bronze badges

Collectives™ on Stack Overflow

Jquery resize function not working when trying to resize images loaded after document ready

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related