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 相关文章推荐
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
动态加载js、css的实例代码
May 26 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python del()函数用法
2013/03/24 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
详解python中的模块及包导入
2019/08/30 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
无工作经验者个人求职信范文
2013/12/22 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
七一讲话心得体会
2014/09/05 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
pytorch中的 .view()函数的用法介绍
2022/03/17 Python