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 相关文章推荐
详细讲解JS节点知识
Jan 31 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
简单理解vue中Props属性
Oct 27 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
js实现web调用摄像头 js截取视频画面
Apr 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
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP加密解密函数详解
2015/10/28 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python内置数据类型详解
2014/08/18 Python
Python多进程编程技术实例分析
2014/09/16 Python
python格式化字符串实例总结
2014/09/28 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python中一行和多行import模块问题
2018/04/01 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
基于python历史天气采集的分析
2019/02/14 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
详解python中eval函数的作用
2019/10/22 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
某公司部分笔试题
2013/11/05 面试题