图片懒加载

<table class="text"><tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

图片懒加载：         1.DOMContentLoaded事件：页面DOM tree生成过程中,如果有img的src存在且有效时，会发送一个http请求，所以不能设置src，可以使用其他自定义属性....         (这个事件就是要在大多数情况下去替代window.onload事件，因为window.onload事件必须要等待页面所有元素的资源都下载完毕时才触发)   2.onload事件是在页面全部生成用户可以看到效果后触发（所有数据加载完成时触发....）,所以，如果这时候我们使用图片懒加载，页面会出现混乱，尤其是float页面....（当然，我们可以设置图片大小位置，占位，比DOMContentLoaded更加耗时）   3.浏览器的默认机制，url如果相同的话，浏览器不会发送http请求,会直接从缓存中加载图片或者数据...(可以利用这点在页面所有的图片背景使用相同的图片背景url,浏览器只会请求一次，并且以后都是用缓存的图片)         4.每个图片img对象都有一个complete属性,判断浏览器是否已完成对图像的加载....   使用方法1：         1.自定义属性存放src数据，通过getAttribute()获取数据，再通过setAttribute()设置数据......         优点：代码简单      缺点：无法控制是否获取得到图片，   使用方法2：         1.自定义属性存放src数据，通过getAttribute()获取数据，借用中介，new一个img标签，利用这个标签去请求src图片，然后调用onload事件确定图片加载成功后再赋值给原标签(原标签不需要再次请求,直接读取浏览器缓存)....                 优点：可以控制任何时刻显示图片      缺点：代码需要中间层,代码量多                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。