0

我目前正在循环浏览一组图像以检查每个图像的宽度。如果图像宽度小于图像高度，我想将“A 类”添加到该特定图像，否则我想将“B 类”添加到该特定图像。

我可以让这个工作，但它是非常喜怒无常的。它通常可以工作，但有时它会在图像中添加“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
4

2 回答 2

1

加载图像后检查宽度和高度：

slideImage.each(function() {

    $(this).load(function(){
        //image successfully loaded, do stuff here
        console.log($(this).height());
    }).error(function(){
        //something went wrong
    });
于 2013-02-11T11:08:12.737 回答
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;
}
于 2013-02-11T11:19:57.617 回答