Jquery在首次加载时计算宽度问题

第一次加载页面时，图像是累积添加的。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);
        }
    });
});

---

另一种方法是使用

$（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 .....
});

$（窗口）.load（函数（）{
var imageWidth、totalWidth、sliderContent、$slider；
$slider=$（“#slider”）；
sliderContent=$slider.html（）；
$slider.html（“+sliderContent+”）；
imageWidth=$slider.find（“img”）.width（）；
totalWidth=$slider.find（“img”）.size（）*imageWidth；
$（“#滑块”）.css（“宽度”，图像宽度）；
$（“#slideWrapper”）.css（“宽度”，totalWidth）；
//其他代码。。。。。
});

---

希望这是有意义的

您可以使用

$（窗口）。加载

，可能是您的函数在加载图像之前执行，因此第二次图像从缓存中出现，这样它们就不会在第一次加载时花费时间图像不会从缓存中出现

$(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 .....
});

$（窗口）.load（函数（）{
var imageWidth、totalWidth、sliderContent、$slider；
$slider=$（“#slider”）；
sliderContent=$slider.html（）；
$slider.html（“+sliderContent+”）；
imageWidth=$slider.find（“img”）.width（）；
totalWidth=$slider.find（“img”）.size（）*imageWidth；
$（“#滑块”）.css（“宽度”，图像宽度）；
$（“#slideWrapper”）.css（“宽度”，totalWidth）；
//其他代码。。。。。
});

---

希望这有意义

谢谢您的回复。但是$（window.load（））功能非常缓慢。问题是继续。我已经清楚地提到，在第一次加载时，您的图像将作为新图像加载，然后浏览器将其缓存，因此第二次将从缓存中提取图像并快速加载。当我使用Chrome和Safario打开html时，我会遇到此问题。您可以使用

jquery图像加载事件

请参见此我使用console.log（）检查，imageWidth和totalWidth值为0。感谢您的响应。但是$（window.load（））功能非常缓慢。问题是继续。我已经清楚地提到，在第一次加载时，您的图像将作为新图像加载，然后浏览器将其缓存，因此第二次将从缓存中提取图像并快速加载。当我使用Chrome和Safario打开html时，我会遇到此问题。您可以使用

jquery图像加载事件

请参见此我使用console.log（）检查，imageWidth和totalWidth值为0。

$(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 .....
});