js 或者 jq怎么判断所有图片加载完成？

Question

js 或者 jq怎么判断所有图片加载完成？

Answer 1

用document的onload事件，或者如果只关心图片，就挂接img的load事件。

$('img').on('load', function() {

    // xxx

});

Answer 2

 /**

 *加载图片

 * @param arr ['图片链接']

 * @returns {Array}

 */

function loadImg(arr) {

    var newimages = [];

    var arr = (typeof arr != "object") ? [arr] : arr  //确保参数总是数组

    for (var i = 0; i < arr.length; i++) {

        newimages[i] = new Promise(function (resolve, reject) {

            var image = new Image();

            image.addEventListener('load', function listener() {

                resolve(image);

                this.removeEventListener('load', listener);

            });

            image.src = arr[i];

            image.addEventListener('error', reject);

        })

    }

    return newimages

}

Promise.all(loadImg(listPics)).then(function () {

    console.log('图片加载完成')

});

之前项目使用过的加载全部图片的处理方案，希望能帮助你

Answer 3

用到js图片的onload事件,jq的load

Answer 4

那得预先知道图片的数量了，加一个计数器，在load回调函数中

var i = 0;

$('img').load(function(){

    i++;

    if(i==x){

        ...

    }

});