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

Question

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

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

到目前为止我所拥有的（但不知道它是否是最佳方式）：

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

谢谢

Answer 1

如果我理解正确，我会在模板或母版页中写入图像，或者使用 css 属性编写图像，然后在 jquery 中使用一个事件来显示它。

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


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

Answer 2

I've never had to do this with jQuery as I either do it manually in JS:

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

Or, if I'm already using jQuery for the project, I'll just use Thickbox. If you look at its source, it has something similar to the above.

To display it, have a pre-defined div in your source file that is initially set to display: none;, then use JS to set its content to the image and change it to be visible. You can see an example of this at pcgalore.com, the rotating quote banner uses it.

Answer 3

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

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

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