0

背景画像が横長か縦長かに基づいて、画像にクラスを追加するスクリプトに取り組んでいます。

関数は次のとおりです。

function loadImg (mythis, callback) {
    var src = getUrl($(mythis).css('background-image'));


    var t = new Image();
    t.src = src;

    console.log(t.height);

    var height = t.height;
    var width = t.width;
    if(width > height){
        $(mythis).parent().addClass('panorama');    
        $(mythis).parent().parent().removeClass('smallpost');                    

}

これは Webkit では優れていますが、Firefox や IE ではそうではありません。問題は t.height と t.width にあり、これらのブラウザでは常にゼロです。このソリューションの課題の 1 つは、関数を実行する前に画像を読み込む必要があることです。画像は背景画像であり、DOM には含まれていないため、スクリプトが実行される前に遅延を追加するだけで済みました。少し罪深いことはわかっていますが、この場合は実際に受け入れられる解決策です。それが私の問題と関係があるかどうかはわかりません。

完全な JavaScript: $(function(){

    setTimeout(function(){
        var elems = $('.post .crop'), count = elems.length;
        $(elems).each(function(i){
            //Rezise image
            loadImg(this, function callback(){

            //Run masonry afte last image
            if (i = count-1){
                $('#content').imagesLoaded(function(){
                    $('#content').masonry({
                        itemSelector : '.post',
                        gutterWidth: 15,
                        columnWidth: 320
                    });
                });
            };



            });
        })
    },5000);

    //getImgSize('http://25.media.tumblr.com/83c73059a904b46afba332f26e33c5bd/tumblr_mmvwy7XjKq1sqsf7io1_500h.jpg')

    function getUrl(styling){
        styling = styling.replace('url(','').replace(')','');
        return (styling);
    }

    function loadImg (mythis, callback) {
        var src = getUrl($(mythis).css('background-image'));


        var t = new Image();
        t.src = src;

        console.log(t.height);

        var height = t.height;
        var width = t.width;
        if(width > height){
            $(mythis).parent().addClass('panorama');    
            $(mythis).parent().parent().removeClass('smallpost');                    

    }

    callback();


    }

});
4

1 に答える 1

2

表示される違いは、通常、画像のキャッシュ状態に関連しています。画像が既に利用可能な場合は、寸法がすぐにわかる場合があります。

loadイベントを処理する必要があります:

var t = new Image();
t.onload = function(){
   var height = t.height;
   var width = t.width;
   if(width > height){
       $(mythis).parent().addClass('panorama');    
       $(mythis).parent().parent().removeClass('smallpost');
   }  
};
t.src = src;

編集 ：

関数に別の問題がありますgetUrl。一部のブラウザーがスタイルに追加する可能性のある引用符が削除されません。

変化する

styling = styling.replace('url(','').replace(')','');

に

styling = styling.replace('url(','').replace(')','').replace(/"/g,'');
于 2013-05-22T08:32:38.823 に答える