<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事件确定图片加载成功后再赋值给原标签(原标签不需要再次请求,直接读取浏览器缓存).... 优点：可以控制任何时刻显示图片 缺点：代码需要中间层,代码量多
