javascript - 如何让 jQuery 在处理图像之前等待图像列表加载？

Question

如何告诉 jQuery 在启动图像轮播之前等待图像列表加载？

我有一个要在图像轮播中使用的大图像列表。这些图像的大小不同，我想使用 javascript/jQuery 根据最宽的图像调整视口(viewport)大小，同时将所有图像缩放到相同的高度。

<div id="viewport" style="overflow:hidden" class="clearfix">
    <ul id="carousel" style="width:2000em">
       <li><img src="large01.jpg"></li>
       <li><img src="large02.jpg"></li>
       <li><img src="large03.jpg"></li>
       <li><img src="large04.jpg"></li>
       <li><img src="large05.jpg"></li>
       <!-- li { float: left } -->
    </ul>
</div>

我认为我需要等待所有图像加载后才能确定它们的 $(img).height() 和 $(img).width() 但我尝试过 $(document).ready()、$(window).load()、$(window).ready() code> 跨浏览器结果不一致。此外，似乎某些 .load() 已被弃用。

处理这个问题的正确方法是什么。

或者是否有办法在加载图像之前获取图像的宽度和高度？

Answer 1

这应该可以完成工作:

var images = $('#carousel img');
var count = images.length;
var loaded = 0;

images.each(function() {
    var image = new Image();
    image.onload = function() {
        loaded += 1;

        if (loaded == count) {
            //all images loaded
        }
    }

    image.src = $(this).attr('src');
});