javascript - Jquery 图像预加载器(我如何让loading.gif 更快地出现)

Question

我正在尝试让 Jquery 图像预加载器启动“loading.gif”，并使图像预加载区域在页面打开时立即启动(如果这是一个合适的术语)，并且我一直在尝试 javascript 放置和其他操作，但是对于我的口味来说，它总是加载得太晚了。

这是网址

http://eleven23.net/beta/work/web/lounge22-preload.php

我正在尝试一些变量，以使其加载速度更快

我应该使用哪一个？

$(window).bind("load", function() {

• 或-

$(document).ready (function() {

我还将内联 javascript 放在 </body> 之前希望这也会加快 jquery 的启动时间。

有什么建议吗？

Answer 1

我使用旧的图像元素来缓存图像。当它们加载时，我知道它们在浏览器缓存中。如果我想确保它们在附近，我会将它们保存在一个不能超出范围的数组中。

var images = [];

// Preload a list of images with an optional callback as a final parameter.
function preload() {
    if ( arguments.length == 0 ) return;
    var waiting = arguments.length - 1,
        count = 0,
        callback = arguments[ arguments.length - 1 ];
    if ( typeof callback == "string" ) {
        callback = function() { };
        waiting++;
    }
    function loaded() {
        if ( ++count == waiting ) callback();
    }
    for ( var i = 0 ; i < waiting ; i++ ) {
        var image = new Image();
        image.onload = loaded;
        image.src = arguments[ i ];
    }
}

preload( "people.gif", "images/star.jpg", "/site/images/panorama.jpg", function() {
    doSomethingWithImages();
});

我很想知道使用图像元素的任何主要缺点。

我在 MDC 上找不到 Image 的原始文档，但这里有一些有关使用 Image 对象的当代文档。

https://developer.mozilla.org/en/Canvas_tutorial/Using_images

但是，该对象早于 Canvas 和 HTML 5。它可以追溯到很久以前。

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html