qq_39963971的博客

前端开发的时候，有些列表页面可能会有很多图片需要加载。一次加载太多图片，会占用很大的带宽，影响网页的加载速度。这时候我们想到一种方式，让用户浏览到什么地方，就加载该处的图片。这里写了一个简单的例子，大家可以去体验一下，当然这里考虑到的是最简单的情况。 这里简单的讲解一下这个例子里面的源码。例子查看DOM 结构由一个父容器div#lazy-img，里面是图片标签，

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.1.引入

本文主要通过以下几方面来说明懒加载技术的原理一、什么是图片滚动加载？　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。二、为什要使用这个技术？　　比如一个页面中有很多图片，如淘宝、京东