html 预加载的作用,以HTML格式预加载图像

3 个答案:

答案 0 :(得分：3)

尝试使用$.Deferred()，.queue()

var images = ["http://lorempixel.com/1200/800/cats/"

, "http://lorempixel.com/1200/800/nature/"

, "http://lorempixel.com/1200/800/animals/"

, "http://lorempixel.com/1200/800/technics/"

];

// do stuff when image loaded

var loadImage = function loadImage(elem) {

return $(elem).fadeTo(500, "1.0", "linear");

};

// load images

var loadImages = function loadImages(urls, image, complete) {

// `this` : `document`

urls.forEach(function(imageSrc, i) {

var img = new Image;

var dfd = new $.Deferred();

// return `this` : `document`

dfd.then(function(ready) {

loadImage(ready);

return this

}, function(error) {

console.log(error)

})

.always(function() {

console.log(complete, urls.length);

return urls.length === complete

? $(this)

.data("complete", complete + " images loaded")

.dequeue("images") // when all images loaded

: this

});

// log errors

img.onerror = dfd.reject;

img.onload = function(e) {

complete = this.complete ? ++complete : complete;

dfd.resolveWith(document, [

image.eq(i).prop("src", this.src)

]

);

};

img.src = imageSrc

});

// return `this` : `document`

return this

};

$(window).load(function() {

// init `loadImages`

var complete = 0;

// call `loadImages`,

// `this` context : `document`

loadImages.call(document, images, $(".image"), complete)

});

$(document).ready(function() {

// notify when all images loaded

$(this).queue("images", function() {

console.log($(this).data())

});

});

答案 1 :(得分：1)

这实际上从未向DOM添加任何内容，我使用数组来保存已创建图像的引用，并将它们传递给可选的回调

var paths = [

"img/1.jpg",

"img/1a.jpg",

"img/1b.jpg",

"img/1c.jpg"

];

preloadImages(paths);

function preloadImages(paths, callback) {

var images = [];

var loaded = 0;

paths.forEach(function (path) {

var img = new Image();

img.src = path;

img.onload = onImagePreloaded;

images.push(img);

});

function onImagePreloaded() {

loaded++;

if (loaded === paths.length && callback) {

callback(images);

}

}

}

答案 2 :(得分：-1)

不要将图像本身设置为display: none;，而是将其设置在容器上。

CSS：

.preload {

display: none;

}

HTML：