当前位置：文江博客话题详情

Jquery 图像预加载器（我如何让loading.gif 更快地出现）

发布于 2024-07-29 04:09:20 字数 588 浏览 7 评论 0原文

我试图让 Jquery 图像预加载器启动“loading.gif”，并且图像预加载区域在页面打开时立即启动（如果这是一个合适的术语），我一直在尝试 javascript 放置和其他东西，但它总是加载不符合我的口味有点太晚了。

这是网址

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

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

我应该使用哪一个？

$(window).bind("加载", function() {

或 -

$(文档).ready(function(){

另外，我将内联 javascript 放在之前，希望这也能加快 jquery 的启动时间。

有什么建议吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

星軌x 2024-08-05 04:09:20

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

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

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

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

I've used the old-timey image element to cache images. When they load, I know they are in the browser cache. If I want to make sure they are around, I hold onto them in an array that can't go out of scope.

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();
});

I'd be curious to hear of any major drawbacks to using the image element.

I can't find the original documentation for Image at the MDC, but here is some contemporary documentation on using the Image object.

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

But, the object predates Canvas and HTML 5. It goes way back.

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

回复收藏 0 原文