文將的程式記事本

var timer = setInterval(function(){ var isAllImageComplete = true; //取得img标签(略过class是no-wait的图片) document.querySelectorAll('img:not(.no-wait)').forEach(element => { //如果有一张图片的complete是false的话就把 isAllImageComplete 的状态改成false if(!element.complete){ isAllImageComplete = false; } }); //如果 isAllImageComplete的状态是false代表图片还没载入完成 if (isAllImageComplete){ //如果成功会进入 //清掉setInterval clearInterval(timer); //把loading画面的display设成none(这边要自己做) document.querySelector('.loading-hover').style.cssText="display:none;"; } }, 100); //每0.1秒就检查一次

需用到jquery和lodash两个套件 步骤一 帮图片加入  lazyloadimg 这个class 步骤二 图片的html要这样写 <img src="放loading的样式图片或是不放都行" data-src="图片的路径" alt="" class="lazyloadimg"> 步骤三 window . onscroll = _ . throttle ( watchscroll , 200 ); function watchscroll (){ console . log ( '123' ); var bodyScrollHeight = $ ( document ). scrollTop (); // body滚动高度 var windowHeight = window . innerHeight ; // 视窗高度 var imgs = document . getElementsByClassName ( 'lazyloadimg' ); console . log ( bodyScrollHeight ); for ( var i = 0 ; i < imgs . length ; i ++) { var imgHeight = $ ( imgs [ i ])[ 0 ]. offsetTop // 图片距离顶部高度 console . log ( imgHeight ); if ( imgHeight < windowHeight + bodyScrollHeight ) { imgs [ i ]. src = imgs [ i ]. getAttribute ( 'data-src' ); imgs [ i ]. className = imgs [ i ]. className . replace ( 'lazyloadimg