jquery：简单的图像预加载器 + onload答案

【问题标题】：jquery: simple image preloader + onloadjquery：简单的图像预加载器 + onload
【发布时间】：2010-10-19 22:49:51
【问题描述】：

我正在尝试为一个图像制作一个简单的图像预加载器。它应该加载一个图像并且 - 如果完成 - 触发一个事件来显示它。最简单的方法是什么？

我只知道纯 javascript 解决方案，例如 document.createElement("img") - 但是使用 jquery 的最佳方法是什么？

到目前为止我得到了什么（但不知道这是不是最佳方式）：

var img = $("<img src='/images/myPic.jpg'>");
img.bind("load", function(){alert("loaded!")});

谢谢

【问题讨论】：

标签： jquery image preloading

【解决方案1】：

如果我理解正确，我会将图像写入模板或母版页或使用 css 属性的任何内容，然后在 jquery 中使用事件来显示它。

<img id="preloader" src="/myimg.jpg" style="display:none;" />


$("#some-element").ready(function(){
      $("#preloader").show();
});

【讨论】：

【解决方案2】：

我从来不用 jQuery 来做这件事，因为我要么在 JS 中手动做：

var img = new Image();
img.onLoad = function() {alert("Image has been loaded!");};
img.src = "path/to/img.ext";

或者，如果我已经在项目中使用 jQuery，我将只使用 Thickbox。如果你看它的来源，它有类似上面的东西。

要显示它，在你的源文件中有一个预定义的 div，最初设置为 display: none;，然后使用 JS 将其内容设置为图像并将其更改为可见。你可以在pcgalore.com 看到一个这样的例子，旋转引用横幅使用它。

【讨论】：

【解决方案3】：

我会使用 jquery 的 .on() 方法并将其附加到选择器：

<img id="preLoader" src="/images/myPic.jpg" alt="My Pic" style="display: none;" />

$('#preLoader').on('load', function () {
    $(this).fadeIn();
});

【讨论】：