如何用jQuery显示图片的加载栏

How to display a loading bar for images with jQuery?

本文关键字：加载 显示图 何用 jQuery      更新时间：2023-09-26

我的网页上有图片

我想在我的页面上显示一个加载条，显示下载图像的进度。

我该怎么做?

我已经写了一个jQuery插件注册回调图像加载

你可以这样用…

var loading = $('<div id="loading" />').appendTo('body');
$('body').waitForImages(function() {
   loading.remove();
 }, function(loaded, all) {
   loading.html(((loaded / all) * 100) + '% loaded');
});

jsFiddle . 

var preload = function (images, callback) {
    var count = 0;
    for (var i = 0, len = images.length; i < len; i++) {
        var img = new Image();
        img.src = images[i];
        img.onload = function () {
            var perc = ++count * (100 / len) | 0;
            if (callback) callback.call(this, perc, perc === 100);
        };
    }
};

用法很简单:

preload(['http://lorempixel.com/800/600'], function(perc, done) {
    console.log( perc);
    if(done) console.log( 'Done!' );
    // `this` refers to each loaded image.
});
相关文章：