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”）;.

- 在准备好的功能中，添加如下内容：

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

悲伤番茄（jQuery中图片.load功能）

2 个答案: