想着不用插件，自己试着实现图片预加载，然后写了个图片预加载的demo,有点粗糙。 原理：在图片元素下面存在一个“laoding”的图片，通过判断这个元素距离可视区域顶部的距离是否大于当前页面可视区域的高度，即 $('#lazy-index').offset.top < $(window).height() 或者document.getElementById('lazy-index').getBoundingClientRect().bottom < document.body.offsetHeight。
下面是DOM结构
<img data-src="img/1.jpg" alt=""> <img data-src="img/2.jpg" alt=""> <img data-src="img/3.jpg" alt=""> <img data-src="img/4.jpg" alt=""> <img data-src="img/5.jpg" alt=""> <img data-src="img/6.jpg" alt=""> <img data-src="img/7.jpg" alt=""> <img data-src="img/8.jpg" alt=""> <img data-src="img/9.jpg" alt=""> <img data-src="img/10.jpg" alt=""> <img data-src="img/11.jpg" alt=""> <img data-src="img/12.jpg" alt=""> <img data-src="img/13.jpg" alt=""> <img data-src="img/14.jpg" alt=""> <img data-src="img/15.jpg" alt=""> <img data-src="img/16.jpg" alt=""> <div id="lazy-index"> <img src="img/lazyload.jpg" alt=""> </div>下面是javascript
<script> $(function(){ window_height = $(window).height(); //可视区域的高 getImg();//预加载图片 /*页面滚动的时候加载图片*/ $(document).scroll(function(){ if(document.getElementById('lazy-index').getBoundingClientRect().bottom < window_height){ getImg(); } }); }); function getImg() { var img_list = $('img'); //所有图片 var len = img_list.length; var img_arr = []; //待预加载的图片路径 var img_item = []; for(var i=0;i<len;i++) { var img_obj = img_list[i]; if(!img_obj.src){ img_item.push(img_list[i]); if($(img_obj).data('src')){ img_arr.push($(img_obj).data('src')); //获取图片路径 $(img_obj).css('display','none'); //图片设置隐藏 } } } if(img_arr.length >0){ setImg(img_arr,img_item); }else{ console.log('图片已经全部加载完毕'); } } function setImg(img_arr,img_list) { var img=new Image(); var n=0; img.src=img_arr[n]; if(! img_list[n].src){ img_list[n].src = img_arr[n]; $(img_list[n]).fadeIn(); } img.onload=function(){ n++; if(n<img_arr.length){ img.src=img_arr[n]; } var lazy_heigh_img = document.getElementById('lazy-index').getBoundingClientRect().bottom; if(lazy_heigh_img < window_height ){ // if(! img_list[n].src){ img_list[n].src = img_arr[n]; $(img_list[n]).fadeIn(); // } } } } </script>