图片延迟加载

作者:周星 发布:2017-10-07

在设计电子商务网站首页的时候,比较纠结首页上的商品到底放多少个算合适,如果放的太多了,因为每张商品都配有相应的图片,在打开首页时所有图片会被一起请求,造成页面访问速度极慢;而如果放的商品太少,用户会频繁翻页,用户体验同样不好。

参考一些现在比较主流的电商网站,大家会发现他们的首页上商品很多,但是访问速度很快,打开浏览器console,发现当我们向下滚动页面时,浏览器请求了一些的图片资源,同时进入我们视线的商品的配图由一张很浅的背景图变成了真正的图片,这就是图片的延迟加载。

现在网上有很多插件可以帮助我们完成这一功能,下面以一个当前比较流行的为例:jquery_lazyload

jquery_lazyload依赖jquery,把它们同时引入到html中,注意引用顺序:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

然后修改html中的img标签,如下所示:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

把图片的真实地址放在data-original属性中,给需要延迟加载的图片一个class,这样方便控制它与插件绑定,最后带上长度和高度。然后在页面中调用:

$("img.lazy").lazyload();

如果想优化的更好一些,可以根据实际情况在代码里判断,第几张图片之后使用延迟加载:

@products.each_with_index do |product, index|
  if index < 8
    # 使用传统的 img,直接请求图片
  else
    # 使用 lazy load
  end
end

支付宝扫码赞助博主


评论(1)

周星

周星第1楼

每天都学一点新东西,可惜的是不多,值得表扬的是坚持

2016-07-16 05:26:25