多图加载完成后再同时显示所有图片

Question

如题：页面上有很多图片，想用一个方法去判断所有图片是否加载完成，如果没有，则显示loading动画，否则则显示全部图片。我用window.onload方法貌似没效果，用document.ready方法好像也不对，大家有没有好的建议针对这个需求？请指教

谢谢热心童鞋的建议：

var mask = document.getElementsByClassName("mask")[0];

                var list = document.getElementsByClassName("min")[0];

                var arr = list.children;

                var len = arr.length;

                var t = 0;

                for(var i = 0; i < len; i++) {

                    (function(i) {

                        load(arr[i].children[0]);

                    })(i)

                }

                function load(e) {

                    if(e.complete == true){

                        t++;

                        console.log(t);

                        if(t == len){//判断图片是否加载完

                            mask.style.display = "none";//完成后显示图片（取消遮罩）

                        }

                    }

                }

Answer 1

可以通过img的complete属性进行判断