这是很多大型网站都使用了的方法，比如淘宝、拍拍等等。这次在游戏官网里做一个尝试，效果不错，初期为首页节省了几十K的下载量，因为不同显示器分辨率不同，所以第一屏高度不一样，这个数据有所浮动。首先，将图片的路径存储在img标签的一个非src属性中，LOL首页是存储在rel属性中的，此举是避免页面直接加载图片。然后使用JS的监听方法（IE是attachEvent，其他浏览器是addEventList
这是很多大型网站都使用了的方法，比如淘宝、拍拍等等。这次在游戏官网里做一个尝试，效果不错，初期为首页节省了几十K的下载量，因为不同显示器分辨率不同，所以第一屏高度不一样，这个数据有所浮动。首先，将图片的路径存储在img标签的一个非src属性中，LOL首页是存储在rel属性中的，此举是避免页面直接加载图片。然后使用JS的监听方法（IE是attachEvent，其他浏览器是addEventListener），监听页面的scroll事件。一旦页面滚动，就会执行一个编写的函数，来判断图片是否处于浏览器的当前一屏内，如果是，将rel属性内的地址赋值给src属性，如果不是，继续监听。当板块内的所有图片都被加载后，取消监听。LOL官网首页的活动板块和媒体合作板块均使用了这种技术，大大减少了页面的加载量。
转载请说明出处
知优网 » HTML5延迟加载原理（html页面延迟加载）
知优网 » HTML5延迟加载原理（html页面延迟加载）
