jQuery图像预加载

Question

我有一个Web应用程序，其中有一些图像。

在开始时会在我的页面中显示叠加层，并且会在所有图像上自动淡出。

我需要这样的东西

粗略的代码

var image1="image1.jpg";
var image2="image2.jpg";
var image4="image4.jpg";

image1 & image2 & image4 loaded then fadeout #preload and show content.

请帮助我......我试过了......但没有工作..

var img1 = new Image();
img1.src = "../images/wall.jpg";

img1.onload = function() {
    alert("loaded");
};

Answer 1

var images_loading = $('img').length;
$('img').load(function(){
  if(!--images_loading) {
    // all images loaded
  }
});

请注意，您无法使用display:none隐藏图片。

使用display:none将阻止您的浏览器下载图片。用户visibility:hidden代替。

Answer 2

Try this fiddle。我使用了大多数原始javascript。

如果需要，可以使用jQuerys .load替换onload功能，使用append替换appendChild