Question

I have a very sad tomato, because it’s not resizing, poor thing. If I don’t put the “load” function then some of my thumbs won’t resize, and if I do then the other ones won’t resize.

startDiv.find('img').each(function(p) {
    $(this).parent().css({ height: thumbs_size, width:thumbs_size });
    $(this).css({ height: thumbs_size, width: thumbs_size }); //temporary
    $(this).load(function() {
        if ($(this).height() > $(this).width()) {
            var w = thumbs_size;
            var h = Math.ceil($(this).height() / $(this).width() * thumbs_size);
        } else {
            var h = thumbs_size;
            var w = Math.ceil($(this).width() / $(this).height() * thumbs_size);
        }
        $(this).css({ height: h, width: w });
    });
});

Can anyone save my tomato?
Thanks! 🙂

Answer 1

It’s because some may already be loaded when you call $(this).load( . Do the following, or something like it

startDiv.find('img').each(function(p) {
    $(this).parent().css({ height: thumbs_size, width:thumbs_size });
    $(this).css({ height: thumbs_size, width: thumbs_size }); //temporary

    var $this = $(this);
    function onLoad() {
        var height = $this.height(), width = $this.width();
        var isPortrait = height > width;
        var w = isPortrait ? thumbs_size : Math.ceil(width / height * thumbs_size);
        var h = isPortrait ? Math.ceil( height / width * thumbs_size) : thumbs_size;
        $this.css({ height: h, width: w });
    }
    // Set it on the load event handler in case it's not loaded
    // If it has a width, it's already loaded
    if ($(this).width() > 0) {
        onLoad();
    } else {
       $this.load(onLoad);
    }
});

Or you could just use it in the onload handler which guarantees that all images in the DOM are loaded (also all scripts)

$(window).load(function(){
    startDiv.find('img').each(function(p) {
        $(this).parent().css({ height: thumbs_size, width:thumbs_size });
        var height = $this.height(), width = $this.width();
        var isPortrait = height > width;
        $this.css({ 
            height: isPortrait ? Math.ceil( height / width * thumbs_size) : thumbs_size,
            width: isPortrait ? thumbs_size : Math.ceil(width / height * thumbs_size) 
        });
    });    
});

You may want to give your images default widths and heights with CSS