加载图像时如何立即运行一些代码？ [复制]答案

【问题标题】：How to run some code at once when a image loaded? [duplicate]加载图像时如何立即运行一些代码？ [复制]
【发布时间】：2015-05-10 07:04:46
【问题描述】：

我想在页面加载时获取图像的宽度。因为图片的宽度是用来判断一些条件的，所以逻辑是这样的：

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

Here is a link 来模拟我的问题。我知道如果使用函数setTimeout 延迟到获取图像宽度可用，但不精确。

【问题讨论】：

$('img').load( fnYourHandler );
jsbin.com/midecuvufu/1/edit?html,css,js,console,output

标签： javascript image

【解决方案1】：

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

你可以试试这个onload函数。

【讨论】：

【解决方案2】：

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

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

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

JS BinExample Here

【讨论】：

即使换行码宽度$(function {})，也有可能用图片得到零。
我更新了答案，你也应该听一下图片加载。
感谢您的正确。

【解决方案3】：

这是 jQuery 文档中给出的示例：

...带有简单图像的页面：

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

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

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

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

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

以下是有关该主题的更多信息，可以帮助您：

How to get image size (height & width) using JavaScript?

【讨论】：

非常感谢，这是一个简洁的答案！

【解决方案4】：

或者，如果你很棒，你可以创建图像元素，添加一个源，并在它加载时做一些事情。不需要 jQuery。

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

【讨论】：