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

如何编写 Javascript 预加载器？

发布于 2024-11-05 02:26:14 字数 260 浏览 5 评论 0原文

我不是在谈论如何使用Javascript预加载图像，我更多地考虑了 Flash 预加载器的思路，它在 SWF 加载时显示某种反馈。

该网站大量使用 Javascript，并且在页面加载时需要许多大图像，因此我希望将该网站隐藏在加载屏幕后面，直到初始图像全部加载。

原文

分享到QQ

分享到微博

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

发布评论

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

我三岁 2024-11-12 02:26:14

我编写了一个名为 waitForImages 的 jQuery 插件，它可以让你做到这一点。

回调允许您在加载每个图像时执行任何操作...

$('body').waitForImages(
function() {
   // Called when all images have loaded.
},
function(loaded, total, success) {
   // Called once each individual image has loaded.
   // `loaded` is the number of images loaded so far.
   // `total` is the total number of images to load.
   // `success` is `true` if the image loaded and `false` if the image failed to load.
   // `this` points to the native DOM `img` element.
},
// Set the third argument to `true` if you'd like the plugin to look in the CSS
// for references to images.
true
);

jsFiddle。

I wrote a jQuery plugin called waitForImages that lets you do this.

The callbacks allow you to do whatever when each image has loaded...

$('body').waitForImages(
function() {
   // Called when all images have loaded.
},
function(loaded, total, success) {
   // Called once each individual image has loaded.
   // `loaded` is the number of images loaded so far.
   // `total` is the total number of images to load.
   // `success` is `true` if the image loaded and `false` if the image failed to load.
   // `this` points to the native DOM `img` element.
},
// Set the third argument to `true` if you'd like the plugin to look in the CSS
// for references to images.
true
);

jsFiddle.

回复收藏 0 原文

醉生梦死 2024-11-12 02:26:14

我第一次学习 JavaScript 时写过一篇。我稍后会尝试找到它。基本思想是在页面外部有一个隐藏元素，并在其中加载图像。

当心，丑陋的代码是我一开始写的。此外，尽管有很好的评论，但它可能并不完全是您想要的。只需修改它并使其成为通用函数即可。基于 jQuery，用于 javascript 画廊：

this.preload = function(){
    /*
     * Preloads all the image to a hidden div so the animation won't glitch.
     */
    if (document.getElementById("preload")){                // Checks for existance.
        var preload = document.getElementById("preload");   // Gets the preload div if it exists.
    } else {
        var preload = document.createElement("preload");    // Creates the preload div if it doesn't exist.
        $(preload).attr("id", "preload");
    }
    for (var i=0; i<this.aNodes.length; i++){               // Get all the image links
        var img = document.createElement("img");            // Loads all the image in a hidden div.
        $(img).attr("src", this.aNodes[i].href);
        preload.appendChild(img);
    }
}

I have one written when I first learned JavaScript. I'm going to try to find it in a second. The basic idea is to have a hidden element that's outside the page, and load your image in there.

Beware, ugly code as I wrote this when i started. Also it probably is not exactly what you're looking for, though there are good comments. Just modify it and make it a generic function. Based on jQuery, for a javascript gallery:

this.preload = function(){
    /*
     * Preloads all the image to a hidden div so the animation won't glitch.
     */
    if (document.getElementById("preload")){                // Checks for existance.
        var preload = document.getElementById("preload");   // Gets the preload div if it exists.
    } else {
        var preload = document.createElement("preload");    // Creates the preload div if it doesn't exist.
        $(preload).attr("id", "preload");
    }
    for (var i=0; i<this.aNodes.length; i++){               // Get all the image links
        var img = document.createElement("img");            // Loads all the image in a hidden div.
        $(img).attr("src", this.aNodes[i].href);
        preload.appendChild(img);
    }
}

回复收藏 0 原文

~没有更多了~