谁会不喜欢一些触目惊心图像 驱动你点回家无论是产品或服务销售 试图传递复杂思想 或只是沉浸于用户情感 图片可以实现人人都知道他们工作,人人都爱他们
所有人除网络服务器幸好他们没有感知,所以我们不必担心他们的情感即便如此 图片收集成本70%带宽.
耗资存储空间 当然更重要的是,它耗资服务器和用户带宽和数据封顶
很久以前( InternetYears)浏览器开发者发现,如果他们开始一次加载多外部资源,他们可以更快加载页页并增速并发脚本和CSS仍在下载时,您的浏览器通常也会尝试抓取所有图像
以这种方式,理论中,它全部准备CSS和JS教浏览器如何处理所有图像后立即去总而言之,它准备早点出发
万一用户不滚动到页面上呢万一从不见多或多图像呢数据两端都浪费
向这里转懒加载.
如何工作
非主动懒加载图像等待用户获取唯一必备图像加载 保存带宽上千兆字节用户越多网站存取越多
别从我这里抢走取自Chris CoyierCSS-Tricks名声
高流量网站表示500万用户中的200万访问带多图片的博客文章,下方有750k图像会省下一船带宽(150万兆字节.)
连那都只是句引文 虽说它出自一个聪明人想要真实世界例子 取验尸NYStudio+107.使用懒加载法(和其他一些重要技术,但我们现在专注于懒加载法)从107.8秒页加载时间下降至2.8秒
也不是概念证明实战网站顺便说一句,博客文章本身使用懒加载,所以还有一个例子
好棒开始吧
好,但有几件事情想
- 只有在折叠下有大量图像时才有用 。if you just have a here图像 并发一串文本不值钱考虑你的内容
- 懒惰加载不是内置浏览器特征JavaScript必须完成添加懒加载会增加任何项目的总体复杂性开发时间测试成本
- 做错结果可能导致用户完全看不到图片
if you have all the cover, 并仍然想这样做, 这里有几个小技巧:
- 立即加载图像不一定有效,但最理想
- 上端小费不总有效 你需要为图像保留空间万一你看不到其余布局跳动,那从不酷
- 可使用背景颜色、加载动画或小图像预览让用户知道有东西会加载到额外空间中
- 拥有回退解法总是有回退求解
再者,如果他们从未看到会更好,但这种事会发生
工具类
永不结束像这样的文章 不告诉你从何开始图书馆我推荐调用懒汉.支持响应图像和正常图像,并可用像iframes等其他元素工作
更好,它可以自动生成适配的“尺寸”属性 供飞上响应图像使用免得再手动设置
设计快速可扩展性 并与其他JS库玩得愉快设计中从不隐藏搜索引擎内容, 以免影响SEO
结论
时间懒惰,人!无法抗拒
唯一真正下行点是JavaScript依赖性未来你也许能跳过JS区间观察API在所有浏览器中实现眼下,只有Chrome和Opera支持它完全退出盒子
撇开小题,技术可以省下你 和网站 很多数据数据即钱,对你和你的用户都适用
