随着网页内容越来越丰富,页面的图片也越来越多,导致页面加载越来越慢。针对页面的优化,图片加载是一个重点。常见的优化方案有图片预加载,图片惰性加载。或者针对图片格式做一些优化,例如使用webp之类的。这里主要关注图片的加载方式。

图片预加载

背景

图片的加载速度往往影响着网站整体的用户体验,尤其对于包含大量图片的网站。对图片进行预加载,不失为一个高效的解决方案。

解决方案

使用CSS3、JavaScript、Ajax实现图片预加载

具体实现

  1. 3 Ways to Preload Images with CSS, JavaScript, or Ajax
  2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

图片惰性加载

背景

页面图片较多,影响加载速度,而且很多时候,页面加载完了,用户却不会滑动到页面最下面,也就是说加载出来的图片,用户更本就没去看,造成资源浪费的同时也使得页面加载变慢。

解决方案

按需加载图片,如果用户滚动到图片位置,则加载图片。

实现原理

  1. img标签设置src为一个loading图标,然后把实际的图片地址存储到其他自定义属性中;
  2. 监听页面滚动事件,如果页面滚动到图片区域,则替换src为图片的视觉地址。

示例:

1
<img data-original='actual.jpg' src='loading.gif'/>

具体实现

  1. 参考教你实现图片的惰性加载
  2. 使用jQuery的惰性加载库(lazyload), github地址
Contents
  1. 1. 图片预加载
    1. 1.1. 背景
    2. 1.2. 解决方案
    3. 1.3. 具体实现
  2. 2. 图片惰性加载
    1. 2.1. 背景
    2. 2.2. 解决方案
    3. 2.3. 实现原理
    4. 2.4. 具体实现