<img data-src="/path/to/image.jpg" alt="">

img { opacity: 1; transition: opacity 0.3s;}img[data-src] { opacity: 0;}

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { img.setAttribute('src', img.getAttribute('data-src')); img.onload = function() {  img.removeAttribute('data-src'); };});

var lazyLoad = { init: function() {  var that = this;  that.onerrorImgUrl = "data-error"; //圖片加載失敗用什么圖片替換  that.srcStore = "data-src"; //圖片真實地址存放的自定義屬性  that.class = "lazy-img"; //惰性加載的圖片需要添加的class  that.sensitivity = 50; //該值越小，惰性越強（加載越少）  minScroll = 5,  slowScrollTime = 200;  document.addEventListener("scroll", function() {   that.changeimg();  });  setTimeout(function() {   that.trigger();  }, 100); }, scanImage: function() {  var that = this;  var imgList = [];  var allimg = [].slice.call(document.querySelectorAll('img.' + that.class + ''));  allimg.forEach(function(ele) {   if (!that.isLoadedImageCompleted(ele)) {    imgList.push(ele);   }  });  that.imglistArr = imgList; }, isLoadedImageCompleted: function(ele) {  return (ele.getAttribute('data-loaded') == '1') }, trigger: function() {  var that = this;  eventType = that.isPhone && "touchend" || "scroll";  that.fireEvent(document, eventType);  //$(window).trigger(eventType); }, fireEvent: function(element, event) {  // 其他標準瀏覽器使用dispatchEvent方法  var evt = document.createEvent('HTMLEvents');  // initEvent接受3個參數：  // 事件類型，是否冒泡，是否阻止瀏覽器的默認行為  evt.initEvent(event, true, true);  return !element.dispatchEvent(evt); }, changeimg: function() {  function loadYesOrno(img) {   var windowPageYOffset = window.pageYOffset,    windowPageYOffsetAddHeight = windowPageYOffset + window.innerHeight,    imgOffsetTop = img.getBoundingClientRect().top + window.pageYOffset;   return imgOffsetTop >= windowPageYOffset && imgOffsetTop - that.sensitivity <= windowPageYOffsetAddHeight;  }  function loadImg(img, index) {   var imgUrl = img.getAttribute(that.srcStore);   img.setAttribute("src", imgUrl);   img.onload || (img.onload = function() {     img.classList.remove(that.class);     img.setAttribute('data-loaded', 1)     img.removeAttribute('data-src');     //$(this).removeClass(that.class).getAttribute('data-loaded',1),     that.imglistArr[index] = null;     img.onerror = img.onload = null;    },    img.onerror = function() {     img.src = img.getAttribute(that.onerrorImgUrl);     img.classList.remove(that.class);     img.classList.add("lazy-err");     img.setAttribute('data-loaded', 0);     //$(this).removeClass(that.class).getAttribute('data-loaded',0),     that.imglistArr[index] = null,      img.onerror = img.onload = null    });   var newImgStack = [];   that.imglistArr.forEach(function(ele) {    //img標簽可見并且加載未完成    if (!that.isLoadedImageCompleted(ele)) {     newImgStack.push(ele);    }   });   that.imglistArr = newImgStack;  }  var that = this;  that.scanImage();  that.imglistArr.forEach(function(val, index) {   if (!val) return;   var img = val;   if (!loadYesOrno(img) || that.isLoadedImageCompleted(img)) return;   if (!img.getAttribute(that.srcStore)) return;   loadImg(img, index);  }) }};