1

サイズ変更ではないため、残念なことに、私は非常に悲しいトマトを持っています。「ロード」機能を配置しないと、親指の一部のサイズが変更されず、追加すると他の親指のサイズが変更されません。

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

誰か私のトマトを救ってくれませんか? ありがとう！:)

4

2 に答える 2

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

または、DOM内のすべての画像（およびすべてのスクリプト）が読み込まれることを保証するonloadハンドラーで使用することもできます。

$(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を使用して画像にデフォルトの幅と高さを指定することをお勧めします

于 2012-07-17T19:01:11.687 に答える
1

更新: 上記のソリューションはスタンドアロンの HTML ページで機能しましたが、Wordpress はすべてを同じ方法で処理していなかったので、Wordpress では次のようにしました。

-- この JavaScript を functions.php のキューに入れます: 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)
        });
});
于 2012-07-18T00:08:51.890 に答える