html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <style> *{ padding:0; margin:0; } ul li{ position: relative; padding:10px; border-bottom:1px solid #f2f5f7; height:50px; } ul li img{ width:50px; height:50px; position: absolute; left:10px; top:10px; } ul li div{ margin-left:60px; } ul li div h2, ul li div p{ font-size: 12px; } /*容器尺寸最好设置成图片尺寸，避免layout*/ li{height:300px;} </style> </head> <body> <ul> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> <li> <img src="Thumbnail.png" data-src="image_1.png"> <div> <h2>标题</h2> <p>详细内容详细内容</p> </div> </li> </ul> <script src="imgPreload.js" type="text/javascript"></script> <script> window.onload = function() {//页面加载后首屏自动加载一次 loadingimg(); }; function loadingimg(){ var images = document.getElementsByTagName("img"); _laimgload.loadImg(images); //图片预加载 window.onscroll = function(){ _laimgload.loadImg(images); //滚动条滑动图片预加载 }; }; /*** 屏幕滚动后加载列表*/ console.log($("#container").height()); $(window).scroll(function() { var scrollTop =$(window).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(window).height(); if (scrollTop + windowHeight >= scrollHeight) { if (_obj.asynFlag == true && _obj.loadFlag == true) { loadingimg(); } } }); </script> </body> </html>
图片预加载的封装imgPreload.js
//图片预加载JS function Laimgload(){} Laimgload.prototype.winHeight = function(){ //计算页面高度 var winHeight = 0; //获取窗口高度 if (window.innerHeight){ winHeight = window.innerHeight; }else if ((document.body) && (document.body.clientHeight)) { winHeight = document.body.clientHeight; } return winHeight; } Laimgload.prototype.loadImg = function(arr,lazy){ //图片预加载执行 lazy = lazy||50;//提前加载的距离 for( var i = 0,len = arr.length; i < len; i++){ if(arr[i].getBoundingClientRect().top-this.winHeight() < document.documentElement.clientHeight && !arr[i].isLoad){ arr[i].isLoad = true; arr[i].style.cssText = "transition: ''; opacity: 0;"; if(arr[i].dataset){ this.aftLoadImg(arr[i],arr[i].dataset.src); }else{ this.aftLoadImg(arr[i],arr[i].getAttribute("data-src")); } (function(i){ setTimeout(function(){ arr[i].style.cssText = "transition: 1s; opacity: 1;" },16) })(i); } } } Laimgload.prototype.aftLoadImg = function(obj,url){ //图片地址切换 var oImg = new Image(); oImg.src = url; if(oImg.complete){ obj.src = oImg.src; }else{ oImg.onload = function() { obj.src = oImg.src; }; } } _laimgload = new Laimgload(); /* 图片预加载JS * 把图片<img src="这里放加载中的小图" data-original="这里放图片的路径"/> 然后获取图片集合传入下面调用函数中 获取图片集合jQuery方法 $("#content_id").find("img"); * 调用方法： _laimgload.loadImg("这里传图片集合"); * */