jQuery圖像每個循環問題

我目前正在循環瀏覽一組圖像來檢查每個圖像的寬度。如果圖像寬度小於圖像高度，我想爲該特定圖像添加'A類'，如果不是，我想將'B類'添加到該特定圖像。jQuery圖像每個循環問題

我可以得到這個工作，但它是相當氣質。它通常有效，但有時它會在圖像中添加「B類」，並添加「A類」。我試圖也使用布爾值來確保函數的每個部分在應該時觸發，但我仍然得到相同的結果。任何想法可能是什麼問題？下面

代碼：加載圖像檢查寬度和高度後

loadContent = function() { 
     //set up ajax 
     ajaxLoader.ajaxStart(function() { 
      $(this).fadeIn(200); 
     }).ajaxStop(function() { 
      $(this).fadeOut(200); 

     //load the content 
     fixedWrap.load(postLink, function() { 
      var loopingImages, 
       slideImage = $('.ddbSlide img'), 
       slideImageFirst = $('.ddbSlide img:first'); 

       //start the image loop 
       slideImage.each(function() { 
       var imgWidth = $(this).width(), 
        imgHeight = $(this).height(); 
       loopingImages = true; 
       // 
       if (imgWidth <= imgHeight) { 
        $(this).addClass('ddbImagePortrait'); 
        $(this).css({ left: '55%' }); 
        loopingImages = false; 
       } else { 
        $(this).addClass('ddbImage'); 
        $(this).css({ left: '34%' }); 
        loopingImages = false; 
       } 
      }); 

      if (loopingImages == false) { 
       var checkingClass; 
       if (slideImageFirst.hasClass('ddbImagePortrait')) { 
        $('.articleTextWrap').css({ left: '20%' }); 
        checkingClass = false; 
       } else { 
        $('.articleTextWrap').css({ left: '5%' }); 
        checkingClass = false; 
       } 
       if (checkingClass == false) { 
       addSlider(); 
       } 
      } 

      return false; 
     }) 
    }; //END loadContent function

來源

2013-02-11 user1391152

最有可能的問題是，你想之前的圖像已經完全加載，檢查圖像尺寸。看例如http://stackoverflow.com/questions/9787511/getting-image-width-and-height-with-jquery – JJJ 2013-02-11 11:06:34

：

slideImage.each(function() { 

    $(this).load(function(){ 
     //image successfully loaded, do stuff here 
     console.log($(this).height()); 
    }).error(function(){ 
     //something went wrong 
    });

來源

2013-02-11 11:08:12 Johan

工作就像一個魅力！感謝大家的幫助和建議。 – user1391152 2013-02-11 11:57:24

你的代碼有2個問題

首先loopingImages送花兒給人false所以嘗試一下本作的是，

loopingImages = true; 
// 
if (imgWidth <= imgHeight) { 
    $(this).addClass('ddbImagePortrait'); 
    $(this).css({ left: '55%','position':'relative' }); 
} else { 
    $(this).addClass('ddbImage'); 
    $(this).css({ left: '34%' ,'position':'relative'}); 
    loopingImages = false; 
}

其次再checkingClass總是false這種嘗試，

var checkingClass; 
if (slideImageFirst.hasClass('ddbImagePortrait')) { 
    $('.articleTextWrap').css({ left: '20%','position':'relative' }); 
    checkingClass = true; 
} else { 
    $('.articleTextWrap').css({ left: '5%' ,'position':'relative'}); 
    checkingClass = false; 
}

來源

2013-02-11 11:19:57

jQuery圖像每個循環問題

回答

相關問題