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

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属性进行判断

Answer 2

当图片加载完成，onload将被调用

 var image = document.getElementById('image');
  image.onload = function() {
     console.log("我加载了");
     load++;
  };

判断数量加载完成了就显示图片

Answer 3

用lazyload.js就可以了

Answer 4

img.onload 加载完成。
img.onerror 加载失败。