悲伤的番茄（jQuery 中的 Image .load 函数）

Question

我有一个非常难过的番茄，因为它没有调整大小，可怜的东西。如果我不放“加载”功能，那么我的一些拇指将不会调整大小，如果我这样做，那么其他拇指将不会调整大小。

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

谁能拯救我的番茄？ 谢谢！ :)

Answer 1

这是因为调用 $(this).load( 时可能已经加载了一些。执行以下操作或类似操作

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

或者您可以在 onload 处理程序中使用它，以保证 DOM 中的所有图像都已加载（也包括所有脚本）

$(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) 
        });
    });    
});

您可能希望使用 CSS 为图像设置默认宽度和高度

Answer 2

更新： 尽管上述解决方案适用于任何独立的 html 页面，但 Wordpress 处理一切的方式并不相同，所以对于 Wordpress，我使用了这个：

-- 在functions.php中加入这个javascript： https://github.com/alexanderdickson/waitForImages

-- 定义你的 startDiv，例如：startDiv = $(".myThumbnailDiv");。

-- 在你的 ready 函数中，添加如下内容：

//Thumbnail parent container size, so they load within a thumbsize box
startDiv.find('img').each(function(p) {
    $(this).parent().css({ height: thumbs_size, width:thumbs_size });
});

//Call the function in waitingforimages.js 

startDiv.waitForImages(function() {
   //alert('All images have loaded.');
}, function(loaded, count, success) {

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