加载图像后的功能-正确的方法答案

【问题标题】：Function after image is loaded - the correct way加载图像后的功能-正确的方法
【发布时间】：2014-12-07 04:51:32
【问题描述】：

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

我知道以前有人问过这个问题，但每个答案都建议使用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 中，但不一定。

【问题讨论】：

您的代码无效，您关闭并重新打开字符串中的引号。 "function(){ console.log("works!"); }"。另外，为什么要使用 onload 作为属性？你可以做.on('load', function(){ console.log("works!"); })。
另外，如果你能引用 W3C 规范中提到的 onload 对 img 元素无效的地方，那将会很有帮助。只要我在设置src 属性之前添加侦听器，我就从来没有遇到过在图像上使用事件的问题（即使那样，这个问题也只是在旧版本的 IE 中）。
更正了引号，至于其余的，没关系，只是一个例子，我不使用这段代码。
@AlexanderO'Mara 我在这里读到了（第一条评论）：stackoverflow.com/questions/280049/…。而且，正如我的测试所示，这是真的。
我无法使用 $(new Image()).attr('onload', 'alert("works")').attr('src', "http://wallpaperus.org/wallpapers/04/151/outer-space1-1472x6429-wallpaper-1634552.jpg").appendTo($('body')); 重现您的问题。我通过中断互联网连接强制下载图像需要更长的 20 秒时间。

标签： javascript jquery html image dom

【解决方案1】：

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);

您的代码有语法错误

(") 引号语法错误，您可以在内联事件代码中转义引号，因此请始终使用相反的引号"，'
你已经添加了匿名函数，但是任何地方都没有调用

jQuery 代码

$(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'));

【讨论】：

是的，但是您的流程错误.. 请参阅您的代码问题的答案
再一次，您的代码没有改变任何东西，引号在 12 分钟前已更正。请再次阅读我的问题。
好的，但是匿名函数function(){ console.log("works!"); }不行，它可以作为回调函数，否则你需要添加函数名并调用
你的代码在你调用函数时工作，见演示链接jsfiddle.net/zugyw8wy/1
答案是对您的帮助。在某些情况下，不会触发事件，因为图像还在浏览器缓存中...好好搜索您的问题：D