Question

我正在尝试使用load（）方法获取一些图像的宽高比。

$('img').load(function(){
    alert(this.src);
    alert($(this).width());
    setAspectRatio(this);
});

（this.src）告诉我我期待听到的内容。（$（this）.width（））给我0。

我在load（）的文档中找到了这个：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行函数。应该注意有几个已知的警告。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

其中一些项目对我来说听起来有点模糊，但这些图像使用get（）方法附加到元素中，所以我最好的猜测是我的问题与此有关。

这似乎不是一个不寻常的情况，但谷歌并没有给我任何东西。这里有人遇到过这个吗？

Answer 1

您是否尝试过使用

$(window).load(function(){  
  //initialize after images are loaded  
});

在页面完成关闭之前，这不会触发。然后你可以抓住你想要的任何img，并使用你的脚本。

Answer 2

尝试使用此

$('<img/>').load(function(){ });

Answer 3

This answer也涉及这个问题。您的代码不适用于缓存的图像，因为当图像已经缓存时，加载事件通常会在回调绑定之前触发。链接答案中的代码解决了这个问题。

Answer 4

您是否尝试过以下

   $('img').load(function() {
      alert(this.src);
      alert($(this).width());
      setAspectRatio(this); }).delay(500);

$（'img'）。load（）太快开火了

4 个答案: