上次写了一篇 webpack 的学习心得,webpack 能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视频,flash 等)也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求。
jquery-lazyload.js 演示
echo.js 演示
1. 引入:在 HTML 中引入 jQuery 和 jQuery-lazyload,如:
- <script type="text/javascript" src="js/jquery-3.2.1.min.js">
- </script>
- <script type="text/javascript" src="js/jquery.lazyload.min.js">
- </script>
2. 图片中不使用 src 属性,因为使用 src 属性后就会默认发送请求请求图片,使用 data-original 代替如:
- <img class="lazy" data-original="images/p1.jpg" style="margin-top:500px"
- height="300">
3. 添加 jQuery 代码:
- <script type="text/javascript">
- $(function() {
- $("img.lazy").lazyload();
- })
- </script>
1.threshold : 设置 Threshold 参数来实现滚到距离其 xx px 时就加载。如:
- $(function() {
- $("img.lazy").lazyload({
- threshold: 100
- });
- })
2.placeholder : 为某一图片路径. 此图片用来占据将要加载的图片的位置, 待图片加载时, 占位图则会隐藏, 比如放一些等待加载的图片来优化用户体验效果。
- $(function() {
- $("img.lazy").lazyload({
- placeholder: "images/loading.gif"
- });
- })
3.event :触发定义的事件时,图片才开始加载(此处 click 代表点击图片才开始加载,还有 mouseover,sporty,foobar(…))
- $(function() {
- $("img.lazy").lazyload({
- event: "click"
- });
- })
4.effects :图片显示时的效果,默认是 show。
- $(function() {
- $("img.lazy").lazyload({
- effects: "fadeIn"
- });
- })
5.container : 值为某容器. lazyload 默认在拉动浏览器滚动条时生效, 这个参数可以让你在拉动某 DIV 的滚动条时依次加载其中的图片
- $(function() {
- $("img.lazy").lazyload({
- container: $("#container")
- });
- })
6.failure_limit :一般用于当页面中图片不连续时使用,滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内,插件默认情况下在找到第一张不在可见区域的图片时停止循环。如:
- $(function() {
- $("img.lazy").lazyload({
- failure_limit: 20
- });
- })
这里设为 20 表示插件找到 20 个不在可见区域的图片时才停止搜索。
7.skip_invisible : 为了提升性能,插件默认忽略隐藏的图片;如果想要加载隐藏图片. 设置 skip_invisible 为 false;
- $(function() {
- $("img.lazy").lazyload({
- skip_invisible: false
- });
- })
- <script type="text/javascript" src="js/echo.min.js">
- </script>
- <img class="lazy" data-echo="images/p1.jpg" style="margin-top:500px" height="300">
- echo.init({
- //离可视区域多少像素的图片可以被加载
- offset: 500,
- //图片延时多少毫秒加载
- throttle: 1000
- });
来源: http://www.cnblogs.com/Ry-yuan/p/7232109.html