Question

在JavaScript中是否有任何方法可以检测页面上的各个img（包括gif）是否已加载，以便我可以为完全加载的页面资源构建一个进度条？

e.g。

之类的东西

var $imgs = $('img');
var k = 0, n = $imgs.length;
$imgs.onloaded(function(){
    $('#progress-bar inner').width((k++ * 100 / n) + '%');
});

Answer 1

Rayon指出，也许你正在寻找这样的东西？

var $imgs = $('img');
var k = 0, n = $imgs.length;

$imgs.each(function(index){
    $(this).onload(function(){
        console.log("loaded image number:"+index)
        $('#progress-bar inner').width((k++ * 100 / n) + '%');
    });
});

Answer 2

$("<img/>")
    .on('load', function() { //script })
    .on('error', function() { //script })

用于在页面上加载图像的JavaScript事件侦听器

2 个答案: