预加载
<!DOCTYPE html> <html> <head> <title>图片无序预加载-优化</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="keywords" content="your keywords"> <meta name="description" content="your description"> <style> *{margin: 0;padding: 0} #box{width: 1024px;height: 500px;margin: 50px auto;} img{width: 1024px;height: 450px;border: 1px solid red;} #click{text-align: center;} </style> </head> <body> <div id="box"> <img src="" alt=""> <div id="click"> <a href="" id="prev">上一页</a> <a href="" id="next">下一页</a> </div> </div> <script src="jquery.min.js"></script> <script> var imgs = [ 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4116894745,1605052943&fm=26&gp=0.jpg', 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=644449983,791694252&fm=26&gp=0.jpg', 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225666097,3247550499&fm=26&gp=0.jpg', 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3014020588,2537118876&fm=26&gp=0.jpg', 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2171490910,189745274&fm=26&gp=0.jpg', 'https://coding.net/u/ready-/p/study/git/raw/master/img/Magnifier.png', 'https://coding.net/u/ready-/p/study/git/raw/master/img/Magnifier.png' ]; var index = 0, curImg = 0, num = 1,//预加载当前图片后num张图片.. len = imgs.length; $(function () { $('img').attr('src',imgs[0]); $('a').on('click',function(){ curindex = (this.id === 'prev') ? Math.max(0,--index) : Math.min(imgs.length-1,++index); $('img').attr('src',imgs[curindex]); load(); return false; }) }) function load(){ var imgObj = new Image(); $(imgObj).on('load error',function(){ /*if(curImg >= len){ }else{ load(); }*/ if(curImg <= index+num){ load(); curImg++; } }) imgObj.src = imgs[curImg]; } load(); </script> </body> </html>
懒加载
下载echo地址：https://github.com/helijun/documents/tree/master/plugin/echo
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Mr_Chen</title> <style> .demo img { width: 736px; height: 490px; background: url(img/1.gif) 50% no-repeat; } </style> </head> <body> <div class="demo"> <img class="lazy" src="img/2.gif" data-echo="img/1.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/3.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/4.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/5.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/6.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/7.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/8.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/9.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/10.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/11.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/12.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/13.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/14.png"> <img class="lazy" src="img/2.gif" data-echo="img/15.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/16.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/17.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/18.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/19.jpeg"> <img class="lazy" src="img/2.gif" data-echo="img/20.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/21.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/22.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/23.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/24.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/25.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/26.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/27.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/28.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/29.jpeg"> <img class="lazy" src="img/2.gif" data-echo="img/30.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/31.jpeg"> <img class="lazy" src="img/2.gif" data-echo="img/32.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/33.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/34.jpg"> <img class="lazy" src="img/2.gif" data-echo="img/35.jpg"> </div> <script src="echo.js"></script> <script> Echo.init({ offset: 0,//离可视区域多少像素的图片可以被加载 throttle: 0 //图片延时多少毫秒加载 }); </script> </body> </html>