图片异步加载方案

2016-07-25

此文阅次

jQuery Lazy Load 图片延迟加载

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
http://www.w3cways.com/1765.html

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>


<!--
将真实图片地址写在 data-original 属性中，而 src 属性中的图片换成占位符的图片（例如 1x1 像素的灰色图片或者 loading 的 gif 图片）
添加 class="lazy" 用于区别哪些图片需要延时加载，当然你也可以换成别的关键词，修改的同时记得修改调用时的 jQuery 选择器
添加 width 和 height 属性有助于在图片未加载时占满所需要的空间
-->
<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480">


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

jQuery Lazy Load 图片延迟加载 - 前端开发仓库
http://code.ciaoca.com/jquery/lazyload/

你还在用jquery.lazyload这个坑爹的图片分屏加载插件么？ - 胡尐睿丶 - 博客园
http://www.cnblogs.com/hooray/archive/2011/10/15/2212922.html
(第二次图片请求，取消了)

更多工具

lazysizes

原生js，不依赖于jquery/zepto
自动监测可能发生变化的lazyload节点，不需要额外初始化
支持响应式图片srcset
性能高，改善SEO

`aFarkas/lazysizes.`
https://github.com/aFarkas/lazysizes

antimoderate

先加载一张很小的缩略图，它可能只有1K左右，并且按所需尺寸模糊显示，等到大尺寸图片下载好再完整显示大图

`whackashoe/antimoderate: The progressive image loading library for great good!`
https://github.com/whackashoe/antimoderate

图片延迟加载-手动实现

Web图片延迟加载的思路 - 简书

http://www.jianshu.com/p/cc05e9a769e6

图片延迟加载demo - 简书
http://www.jianshu.com/p/bb16cd4f79d7

扩展应用：响应式图片解决方案(Srcset和sizes)

图片响应式解决方案 - 简书
http://www.jianshu.com/p/235ef450f5e9

Srcset和sizes_Responsive 教程_w3cplus
http://www.w3cplus.com/css3/srcset-sizes.html

更多参考
图片延迟加载方案 - 简书
http://www.jianshu.com/p/dc5fd46ff22c