加载图像后的功能 - 正确的方式

Function after image is loaded - the correct way

本文关键字：方式 功能 图像 加载      更新时间：2023-09-26

单击按钮后，开始加载图像。我想要的：当图像完全加载时，正在调用一个函数。

我知道这个问题以前有人问过，但每个答案都建议使用 onload 事件，这并不完全正确。根据 W3C 规范，onload 不是 IMG 元素的有效事件。如果不是因为在某些情况下事件没有被触发，我不会太困扰我。

一切正常，除非图像重量很大并且加载过程需要一些时间（例如 20 秒）。我想onload事件可能设置了一些最长等待时间。带有大量图像的示例代码（在Chrome上测试，您必须清除缓存才能再次测试它，并且，如果您有一些超快的网络，则可能需要使用更大的图像进行测试）：

$(new Image()).attr('onload', 'worksFunc()').attr('src', "http://wallpaperus.org/wallpapers/04/151/outer-space1-1472x6429-wallpaper-1634552.jpg").appendTo($('body'));

解决方案可能在jQuery中，但不一定。

当元素附加到文档中时event工作，因此您需要在文档中附加<img/>元素然后尝试操作，请参阅示例代码

var img = new Image();
img.src = "http://hdwallpapers.us/wp-content/uploads/walls/thumbs/The-Treetop-Temple-Protects-Kyoto-Japan-1024x640.jpg";
img.style.display = "none";
img.onload = function(){
  alert("Image Loaded");
    this.style.display = "block";
}
document.body.appendChild(img);

您的代码存在语法错误

  1. （ " ） 引号语法错误，您可以在内联事件代码中转义引号，因此始终使用相反的引号"、'
  2. 您添加了匿名函数，但任何地方都没有调用

j查询代码

$(new Image()).attr('onload', 
     'var func = function(){ console.log("works!"); }; func.call(this);')
.attr('src', "http://hdwallpapers.us/wp-content/uploads/walls/thumbs /The-Treetop-Temple-Protects-Kyoto-Japan-1024x640.jpg")
.appendTo($('body'));
相关文章：