javascript - 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");
};

score 1 · Accepted Answer

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

请注意，您不能display:none用来隐藏图像。

使用display:none将阻止您的浏览器下载图像。visibility:hidden取而代之的是用户。

score 0 · Accepted Answer

试试这个小提琴。我主要使用原始 javascript 来制作它。

如果你愿意，你可以使用 jQuerys.load替换onload函数，并追加替换appendChild

2 回答 2