当图片加载完成后如何一次性运行某些代码？

Question

当页面加载时，我希望能获取图片的宽度。因为图片的宽度用于判断某些条件，逻辑如下:

var width = $('img').width();
var height = $('img').height();
if(width > height){
  //do fn1
}else{
  //do fn2
}

这是一个模拟问题的链接。我知道使用setTimeout函数延迟获取图像宽度是可行的，但它不太精确。

- Todd Mark

---

$('img').load( fnYourHandler ); - dandavis

http://jsbin.com/midecuvufu/1/edit?html,css,js,console,output - guest271314

Answer 1

这是jQuery文档中提供的示例:

...一个简单图片的页面:

<img src="book.png" alt="Book" id="book">

事件处理程序可以绑定到图像上：

$( "#book" ).load(function() {
  // Handler for .load() called.
});

一旦图像加载完成，处理程序就会被调用。

http://api.jquery.com/load-event/

以下是更多关于该主题的内容，将帮助您解决问题：

如何使用JavaScript获取图像大小（高度和宽度）？

- shmuli

---

非常感谢，这是一个简明扼要的答案！ - Todd Mark

Answer 2

如果您非常厉害，您可以创建图像元素，添加源，并在其加载完成后执行某些操作。不需要使用jQuery。

var image = new Image();
image.onload = function() {
    alert('image loaded');
};
image.src = 'image/image.jpg';

- Tony Gustafsson

Answer 3

object.onload=function(){
var width = $('img').width();
height = $('img').height();
};

你可以尝试使用这个onload函数。

- Vishal varun

Answer 4

在图像加载完成后，您应该检查图像的宽度和高度。 使用JQuery可以像这样检查页面加载：

    $('img').load(function() {
          var width =  $('img').width();
          var height = $('img').height();

          if(width > height){
            console.log(1);
          }else{
            console.log(2);
          }
    });

JS Bin这里的示例

- Shalva Kakauridze

---

即使将代码包装在 $(function {}) 中，仍有可能出现图像宽度为零的情况。 - Todd Mark

我更新了答案，你也应该注意图片加载。 - Shalva Kakauridze

感谢您的正确。 - Todd Mark