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

Posted 2023-03-15

【中文标题】加载图像时如何立即运行一些代码？ [复制]

【英文标题】：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

【参考方案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"  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';