Question

我试图获得一个Jquery图像预加载器来启动“loading.gif”和图像预加载区域，以便在打开页面时立即开始（如果这是一个合适的术语）并且我一直在尝试使用javascript放置和其他东西，但是它总是对我的口味来说太迟了。

这是网址

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

我正在尝试使用一些变量来加快加载速度

我应该使用哪一个？

$（window）.bind（“load”，function（）{

或 -

$（document）.ready（function（）{

我也在</body>之前放置了内联javascript，希望这也会加快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

Answer 2

$（document）.ready（）在加载DOM并准备好进行操作后触发。在此处添加加载图像，预加载大图像，然后再次删除加载图像将无法正常工作。

您需要将加载图像添加到标记中（以便立即渲染），然后预加载大图像，加载后隐藏/删除加载图像。

有一个很好的教程，使用一个简单的插件预加载图像 here

Answer 3

嘿，你可以查看一个很棒的jQuery Preloader，我用完整的回调编写，自动读取图像预加载，以及动画中的大量缓动。请在此处查看：jQuery Preloader

Jquery图像预加载器（如何使loading.gif显得更快）

3 个答案: