如何去写一个Javascript预装载器？ [英] How to go about writing a Javascript pre-loader?

问题描述

我不是在讨论如何使用预加载图片Javascript ，我正在考虑更多的Flash预加载器，当SWF加载时显示某种反馈。

有问题的站点有很重的Javascript并且在页面加载时需要很多大图片，所以我希望将网站隐藏在加载屏幕后面，直到所有的初始图片都加载完成。

我编写了名为waitForImages的jQuery插件，可以让您执行此操作。

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

  $（' body）'）。waitForImages（
 function（）{
 //当所有图片加载时调用
}，
函数（加载，总计，成功）{
 //每载入一张图片后调用。 
 //`loaded`是到目前为止加载的图片数量。 
 //`total`是要加载的图像总数。 
 //`成功'在图像加载时为真，如果图像加载失败则为假。 
 //`this`指向本地DOM`img`元素。 
}，
 //如果您希望插件查看CSS 
 //以获取图像引用，请将第三个参数设置为true。 
 true 
）; 
  

jsFiddle 。

I'm not talking about how to pre-load images using Javascript, I am thinking more along the lines of a Flash preloader which displays some sort of feedback while the SWF loads.

The site in question has heavy Javascript usage and requires many large images at page load so I wish to hide the site behind a loading screen till the initial images are all loaded.

解决方案

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.

这篇关于如何去写一个Javascript预装载器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！