1.什么是懒加载
- 只加载当前窗口范围中的图片
- 在用户滚动页面的时候自动获取更多的数据
2.懒加载的特点
- 通过滚动获取到的新的数据不会影响原有数据的显示
- 加快了网页响应的速度
- 最大程度上减少了服务器端的资源耗用
3.懒加载步骤
- 拿到图片数据后，不要将图片的地址拼接到图片的
src属性中，为其设置其他的属性如data-original，来暂存图片地址 - 获取屏幕的高度
var screenHeight = $(window).outerHeight();
-
在图片加载后，获取到所有图片的上边框到
document上边框的距离this.onload = function () { var $this = $(this); // 图片距离顶部的值 var imgScrollTop = $this.offset().top; // 判断是否在屏幕范围内容 if (imgScrollTop < screenHeight) { // 从data-original中取出值，并放到src属性中 $this.attr({ src: $this.attr('data-original') }); } } -
判断在滚屏中，图片是否进入用户的视野
window.onscroll=function (){ var srcollValue= screenHeight + $(window).scrollTop(); $('section img').each(function (i, v) { var $this = $(this); // 图片距离顶部的值 var imgScrollTop = $this.offset().top; if (imgScrollTop <= scrollValue) { $this.attr({ src: $this.attr('data-original') }) } }) }
4.懒加载插件
使用插件应提前给图片设置高度
