是否有尚未放入文档的 Javascript/jQuery <img /> 标准？答案

【问题标题】：Is there a standard for Javascript/jQuery <img /> that haven't yet been placed in the document?是否有尚未放入文档的 Javascript/jQuery <img /> 标准？
【发布时间】：2010-07-28 23:55:04
【问题描述】：

如果图像标签只是那些没有被插入到文档中的无实体 Javascript 元素之一，是否有关于浏览器如何处理图像加载的规范？一个例子：

$('<img src="/path/to/image.jpg" />')

是否有说明要加载图像的规范？我问是因为我对以下实现感兴趣：

缩略图上的鼠标悬停事件触发加载更大的预览图像。
较大的预览图像加载并触发加载事件，此时它将覆盖在原始鼠标悬停元素的顶部。

(2) 的实现并不难，但我想确保我可以跨浏览器依赖load 事件。我已经在 Firebug 和 Chrome 控制台中尝试过，它似乎工作正常，但我还没有遇到一个规范告诉我它会一直工作。我不会把它放在浏览器之外拒绝加载尚未放置在document 中的图像。

【问题讨论】：

您正在创建 img 元素完全一样？不是先$('<img />')，再设置src属性？因为它们会路由到根本不同的东西（从 jQuery 1.4 开始），这可能会影响您所询问的行为。
傻我。我一直在我的代码中做$("<img />")，我想我会很喜欢和速记。不过，您提出了一个很好的观点，我肯定会留意我将来何时不可避免地犯这个错误。
看来你有两个问题埋在这里：1）在所有浏览器中创建一个分离的img元素会自动获取图像的src吗？和 2) img 元素的 load 事件是否在所有浏览器中一致触发？

标签： javascript jquery dom

【解决方案1】：

load 事件应该在现代浏览器中持续触发。您可能会遇到过时的浏览器（IE6 之前）的问题。我必须推荐的一件事是您在设置src 之前分配一个加载事件处理程序。这样可以确保事件会触发...

$("<img />").load(function() {
  alert("Loaded!");
  $(this).css("border", "solid 2px black").appendTo("body");  
}).src("/path/to/image.jpg");

【讨论】：