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 相关文章推荐
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
JavaScript实现缓动动画
Nov 25 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 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 显示指定路径下的图片
2009/10/29 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
python解析xml文件实例分享
2013/12/04 Python
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
简历中的自我评价怎么写
2014/01/29 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
js不常见操作运算符总结
2021/11/20 Javascript