1

页面第一次加载时出现累积添加的图像。Jquery 不动态计算宽度，但正常出现第二次加载或页面刷新后。可能是什么原因？

Javascript：

$(function(){
    var imageWidth, totalWidth, sliderContent, $slider;
    $slider = $("#slider");
    sliderContent = $slider.html();
    $slider.html("<div id=\"slideWrapper\">" + sliderContent + "</div>");
    imageWidth = $slider.find("img").width();
    totalWidth = $slider.find("img").size() * imageWidth;
    $("#slider").css("width", imageWidth);
    $("#slideWrapper").css("width", totalWidth);

    $(".next-arr").click(function () {
        if (parseInt($("#slideWrapper").css("margin-left")) < 0 && !$("#slideWrapper").is(":animated")) {
            $("#slideWrapper").stop(true, true).animate({ marginLeft: "+=" + imageWidth + "px" }, 1600);
        }
    });

    $(".prev-arr").click(function () {
        if ((parseInt($("#slideWrapper").css("margin-left")) * -1) < (totalWidth - imageWidth) && !$("#slideWrapper").is(":animated")) {
            $("#slideWrapper").stop(true, true).animate({ marginLeft: "-=" + imageWidth + "px" }, 1600);
        }
    });
});

html:

<div id="slider">
    <a href="#" title="img">
        <img src="img.jpg" alt="img" /></a>
    <a href="#" title="img">
        <img src="img.jpg" alt="img" /></a>
    <a href="#" title="img">
        <img src="img.jpg" alt="img" /></a>
    <a href="#" title="img">
        <img src="img.jpg" alt="img" /></a>
</div>

CSS：

#slider {
    overflow: hidden;
}

    #slider a, #slider img {
        float: left;
        overflow: auto;
        position: relative;
    }

    #slideWrapper {
        overflow: hidden;
    }

        #slideWrapper img {
            float: left;
        }
4

1 回答 1

1

您可以使用的其他方式$(window).load，可能是您的函数在加载图像之前执行，因此图像第二次从缓存中出现，因此第一次加载图像不会从缓存中出现。

$(window).load(function(){
var imageWidth, totalWidth, sliderContent, $slider;
$slider = $("#slider");
sliderContent = $slider.html();
$slider.html("<div id=\"slideWrapper\">" + sliderContent + "</div>");
imageWidth = $slider.find("img").width();
totalWidth = $slider.find("img").size() * imageWidth;
$("#slider").css("width", imageWidth);
$("#slideWrapper").css("width", totalWidth);
// other code .....
});

希望这是有道理的

于 2013-04-22T05:23:40.320 回答