前言
有一个朋友问我这个问题,刚好有时间,现在就简单的写个Demo~
github | https://github.com/wangyang0210/bky/tree/picLoadLazy
内容
本来说，不说原理的，但是想想还是简单说下吧。当然现在这种图片懒加载的插件也不少，引用起来也很方便，
原理
-
懒加载是什么？
懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。 -
为什么使用懒加载 ?
1. 节省用户流量，提升用户的体验度2. 提高页面性能，减小浏览器的负担3. 减少无效加载，减轻服务器的压力 -
懒加载原理
图片的加载是由src的值引起的，当对src赋值时浏览器会请求图片资源，所以，我们利用html5的属性'data-src'来保存图片的路径，当我们需要加载图片的时候才将data-src的值赋予src，就实现图片的按需加载，也就是懒加载了
- 设置图片的宽高
- 获取到可视窗口
- 计算首屏展示数
- 绑定到滚动事件
- 判断加载临界点
代码
1<!DOCTYPE html> 2<html lang="cn"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #imglist{ 8 width: 100%; 9 margin: 0 auto; 10 } 11 #imglist img{ 12 width: 600px; 13 height: 350px; 14 background: url('./imgs/loading.gif') no-repeat 50% 50%; 15 } 16 </style> 17</head> 18<body> 19 <h1>下滑加载图片</h1> 20 <hr> 21 22 <div id="imglist"> 23 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv001.jpg"> 24 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv002.jpg"> 25 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv003.jpg"> 26 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv004.jpg"> 27 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv005.jpg"> 28 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv006.jpg"> 29 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv007.jpg"> 30 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv008.jpg"> 31 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv009.jpg"> 32 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv010.jpg"> 33 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv011.jpg"> 34 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv012.jpg"> 35 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv013.jpg"> 36 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv014.jpg"> 37 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv015.jpg"> 38 <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv016.jpg"> 39 </div> 40 41 <script> 42 var imgs = imglist.getElementsByTagName('img'); 43 // 获取 imglist 的宽度 44 var box_width = imglist.offsetWidth; 45 // console.log(box_width); 46 // 获取视口的高度 47 var view_height = document.documentElement.clientHeight; 48 // console.log(view_height); 49 50 // 计算横着能加载图片的张数 51 // var x_number = 舍去取整(box宽 / img宽) 52 var x_number = Math.floor(box_width / imgs[0].offsetWidth); 53 // console.log(x_number); 54 55 // 首屏图片的数量 56 // Math.ceil((视口高 - 首图的顶部偏移量) / 图片高) * 横向图片数量 57 var first_number = Math.ceil((view_height - imgs[0].offsetTop) / imgs[0].offsetHeight) * x_number; 58 59 var m = 0;// 总记录数 60 loadImage(m, first_number); 61 m += first_number; 62 63 64 // 绑定滚动事件 65 window.onscroll = function() { 66 if (m >= imgs.length) return; 67 68 // 滚动条滚动距离 69 var top = document.body.scrollTop || document.documentElement.scrollTop; 70 71 // 未加载的第一张图片到顶部的偏移量 72 var img_top = imgs[m].offsetTop; 73 74 // 判断加载临界点 75 if ((top + view_height) >= img_top) { 76 loadImage(m, x_number); 77 m += x_number; 78 } 79 // console.log(top , " : ", img_top); 80 } 81 82 83 // 开始加载,加载到第几张 84 function loadImage(start, length) { 85 for (var i = start; i < (start+length); i++) { 86 if (i >= imgs.length) return; 87 (function(i){ 88 setTimeout(function () { 89 imgs[i].src = imgs[i].getAttribute('data-src'); 90 }, 500); 91 })(i); 92 } 93 } 94 95 96 </script> 97</body> 98</html>
效果图
