JS实现图片延迟加载并淡入淡出效果的简单方法


Posted in Javascript onAugust 25, 2016

话不多说,直接看示例

首先是图片标记的写法

<img data-src="/images/image.jpg" alt="">

需要将图片的地址放到 data-src 属性里,而src值不需要,直接将src属性去掉。

CSS代码

所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节:

img {
 opacity: 1;
 transition: opacity 0.3s;
}

img[data-src] {
 opacity: 0;
}

这样写的作用是什么?等当图片加载时,你就能看的效果了。

JavaScript代码

我们最终会将 data-src 属性去掉,换成src属性,但这是图片加载成功后的动作:

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
 img.setAttribute('src', img.getAttribute('data-src'));
 img.onload = function() {
 img.removeAttribute('data-src');
 };
});

相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。

但是要注意的是,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。

以上就是本文的全部内容,希望对大家的工作和学习能有所帮助。

Javascript 相关文章推荐
json简单介绍
Jun 10 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
Vue渲染过程浅析
Mar 14 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
JavaScript中闭包之浅析解读(必看篇)
Aug 25 #Javascript
jquery点击切换背景色的简单实例
Aug 25 #Javascript
浅析Javascript ES6中的原生Promise
Aug 25 #Javascript
微信JS接口大全
Aug 25 #Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 #Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 #Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 #Javascript
You might like
解析PHP工厂模式的好处
2013/06/18 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
python读取xlsx的方法
2018/12/25 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
简单了解python元组tuple相关原理
2019/12/02 Python
使用Python发现隐藏的wifi
2020/03/04 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
植物选择:Botanic Choice
2017/02/15 全球购物
九年级化学教学反思
2014/01/28 职场文书
实习生评语
2014/04/26 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
关于旅游的活动方案
2014/08/15 职场文书
会计师事务所实习证明
2014/11/16 职场文书
后备干部推荐材料
2014/12/24 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书