xml - 知道图像何时完成从服务器加载

Question

是否有任何类型的oncomplete方法可以知道图像何时从服务器完全加载？

我有一个 XML 提要，我使用它来获取图像 URL，然后将它们显示在我创建的画廊中。这些图像以各种不同的尺寸出现，我正在尝试调整它们的大小以适应特定的纵横比。我无法调整它们的大小，因为我没有宽度和高度。

以下是我通过 Jquery 提取提要的方式：

$.get('feed/test.xml', function(data){
        $(data).find('item').each(function(){  
            var obj = $(this);
            var image = obj.find('ImageURL').text();  //  http://testimageurl.com

            var str = ' <li>';
            str += '        <img src="'+ image +'" />';
            str += '    </li>';

            $("#slider").append(str);
        });

         // Code for resizing images goes here
    });

加载完成后，我需要能够从 URL 获取图像大小。

对任何人都有意义吗？

Answer 1

您正在寻找load（complete如果图像已被缓存）事件：

尝试改变

$("#slider").append(str);

进入

$(str).find('img')
   .one('load complete', function() {
       /* do something onload or complete event */
   })
   .end()
   .appendTo($("#slider"));