var aImages = document.getElementById("loadimg").getElementsByTagName('img'); loadImg(aImages); window.onscroll = function() { loadImg(aImages); }; function loadImg(arr) { for(var i = 0, len = arr.length; i < len; i++) { if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) { arr[i].isLoad = true; //arr[i].style.cssText = "opacity: 0;"; (function(i) { setTimeout(function() { if(arr[i].dataset) { aftLoadImg(arr[i], arr[i].dataset.imgurl); } else { aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl")); } arr[i].style.cssText = "transition: 1s; opacity: 1;" }, 500) })(i); } } } function aftLoadImg(obj, url) { var oImg = new Image(); oImg.onload = function() { obj.src = oImg.src; } oImg.src = url; }