按需加载图片(图片懒加载)
来源:互联网 发布:中方网络花店 编辑:程序博客网 时间:2024/05/17 23:11
前言
按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量。对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少。
原理
实现图片懒加载的原理也非常地简单,默认情况下不给图片 scr 属性赋值。当满足一定的条件时才把图片地址取出来赋值给 src 属性。一般地,这上为了让网站页面有更好的用户体验,我们都会预先给所有的图片都设置一张默认的图片,比如一个像素的图片或者其它任意一张图片(只要你喜欢)。
实践代码
我们还是先来看看这个 Demo:http://yunkus.com/demo/load-images-on-demand/
例子中用了一个谈入的效果(CSS 3),如果你想用更多的效果,你可以下载一下 animate.css 库,尝试不同效果展示。在这里就不作过多的讲解,至于 animate.css 库的用法你可以参考这里:
Animate.css 使用教程(一个强大的 CSS3 动画库)。
CSS 样式
HTML 代码
JavaScript 代码
不管滚动条处于什么位置,只要你一刷新,就只会加载处于屏幕里的图片。除此之处不管是屏幕上方的图片,还是屏幕下方的图片只要还没进入屏幕区的都不会被加载。这样的处理方式理论上是比较优的,但是在实践的应用中,却不一定能发展出原有的作用。试想一下,不管你是通过地址直接访问,还是通过搜索引擎进入一个页面,一般情况下都会从页面的顶部内容开始显示,如果你有洁癖想让代码更简单,那么 loadImg() 方法就可以更改成如下代码:
其实也没什么变的,只是 if 判断条件少了一个:
不过也有例外,比如:从列表页中点了评论时,极有可能是跳到详情页后直接跳到评论区,这种情况也很常见,此时就不需要更改代码以达到最优。
这里还有个小问题,关于滚动监听事件的,像上面那样写 window.onscroll = function(){} 一个页面只能用一个,如果有其它地主也用到这个滚动监听事件的话,那么就会只有一个起作用。在这里可以用事件绑定来解决,具体的方法可以查阅这里:常用的 JavaScript 函数封装。
转自:http://yunkus.com/load-images-on-demand/
- 按需加载图片(图片懒加载)
- 按需加载图片(图片懒加载)
- 图片按需加载
- 图片按需加载
- 图片懒加载(滚动加载)原理
- jq 图片延迟加载(懒加载)
- 图片预加载与图片懒加载
- 图片预加载与图片懒加载
- 图片懒加载(图片延迟加载问题)
- 按需加载图片、js
- 图片懒加载(初始)
- 图片懒加载技术
- 图片懒加载
- 图片懒加载
- 图片懒加载,亲测
- 图片懒加载
- 图片懒加载
- 图片懒加载
- STM32点LED灯
- Docker部署Web应用(Django)
- 沉浸式状态栏
- ap端编译时遇到fatal error:openssl/opensslv.h: No such file or directory
- AOE网上的关键路径
- 按需加载图片(图片懒加载)
- SD卡之寄存器介绍
- 加权随机数
- 设计模式-外观模式
- wampserver-无法访问www下的项目
- ImportError: No module named 'gmpy2',,本次实践在windows下安装gmpy2
- Ehcache与Memcache的区别
- TCP三次握手和四次挥手详解
- MySQL插入语句insert性能优化