Javascript Can'；在Chrome中无法获得图像的宽度

我一直在创建一个简单的滑块，图像从右侧移动到左侧。在Firefox浏览器中，一切正常，但在Chrome浏览器中，我无法获得图像的宽度

$(window).load(function() {

    //load images from a folder
    for (m = 1; m <= 5; m++) {
        $('ul').append("<li><img src='image_" + m + ".jpg'/></li>");
    }

    //variables
    var ul = $('ul');
        li = ul.find('li');
        ul_width = 0;

    //sum witdh of ul li
    $(ul).children().each(function() {
        ul_width = ul_width + $(this).width();
        alert(ul_width);
    });

...

$（窗口）.load（函数（）{
//从文件夹加载图像
对于（m=1；m您可以尝试一下-它会在文档准备好的第一时间附加图像，并在加载所有内容（包括新附加的元素）后等待检查大小：

$（function（）{//$（document.ready（）的缩写）；
var ul=$（'ul'）；
对于（m=1；m）与
ul
和
li
元素相关的CSS可能与此处的答案相关，但作为猜测，我将检查两件事-如果使用调试器在检查的行上设置断点
$（this）.width（）
，由于css的原因，图像是否不可见/宽度为0？其次，图像是否仍在加载？您可能需要查看$。图像已加载以抑制求和代码，直到它们完全加载到dom中。同意@ChrisO'Kelly的说法，我猜图像尚未加载。一个快速修复方法是通过css设置宽度。在你的幻灯片上，也许你所有的img都有相同的宽度…（我知道，这是快n脏）。最好的方法是使用javascript预加载图像，并在加载完成时触发总宽度计算。当您添加尚未加载的图像时，可能需要将图像加载到浏览器缓存中，然后才能获得其宽度和高度。您可以看到预加载器的工作方式。您的快速转变是jquery中加载函数时的ok
$(function() { // shorthand for $(document).ready();

var ul = $('ul');

for (m = 1; m <= 5; m++) {
    ul.append("<li><img src='image_" + m + ".jpg'/></li>");
}

var li = ul.find('li'),
ul_width = 0;

$(window).one('load', function() {

    li.each(function() {

        ul_width = ul_width + $(this).width();
        alert(ul_width);
    });
});
});