2013-02-11 2 views
0

В настоящее время я просматриваю набор изображений, чтобы проверить ширину каждого изображения. Если ширина изображения меньше высоты изображения, я хочу добавить «класс А» к этому конкретному изображению, если я не хочу добавлять «класс B» к этому конкретному изображению.jQuery image каждый цикл issue

Я могу заставить это работать, но это довольно темпераментно. Он обычно работает, но иногда он добавляет «класс 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 
+1

Скорее всего, проблема в том, что вы пытаетесь проверить размеры изображения, пока изображение не загрузится полностью. См. Например http://stackoverflow.com/questions/9787511/getting-image-width-and-height-with-jquery – JJJ

ответ

1

Проверить ширину и высоту после загрузки изображения:

slideImage.each(function() { 

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

Работал как шарм! Спасибо всем за помощь и предложения. – user1391152

0

ваш код 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; 
}