JS实现图片延迟加载并淡入淡出效果的简单方法
作者:daisy 发布时间:2023-07-02 05:19:14
标签:js,图片,延迟加载,淡入淡出
话不多说,直接看示例
首先是图片标记的写法
<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');
};
});
相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。
但是要注意的是,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。
0
投稿
猜你喜欢
- 1、取得控制台应用程序的根目录方法 方法1、Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径
- # 从X和Y中取出相应步长对应的数组并保存至x_data和y_data中x_data = []y_data = []for i in ran
- 边缘在人类视觉和计算机视觉中均起着重要的作用。人类能够仅凭一张背景剪影或一个草图就识别出物体类型和姿态。其中OpenCV提供了许多边缘检测滤
- Python是一门清晰简洁的语言,如果你对一些细节不了解的话,就会掉入到那些深不见底的“坑”里,下面,我就来总结一些Python里常见的坑。
- Windows环境下一、开启 Imagick 扩展1、安装PHP扩展:Imagick,下载地址 https://pecl.php.net/p
- 前言正常图片转化成素描图片无非对图片像素的处理,矩阵变化而已。目前很多拍照修图App都有这一功能,核心代码不超30行。如下利用 Python
- 方法一:1、进入项目目录下,运行下面程序:nohup python manage.py runserver 0.0.0.0:5008 &am
- 问题:“深入认识Python内建类型”这部分的内容会从源码角度为大家介绍Python中各种常用的内建
- 对于所有的需求,当你不知道怎么处理的时候,你就先用最简单的方法,或者说的明白一点,用最原始的方法,先实现业务需求再说。一、对提现队列数据表“
- 前言大家好,我是小张~记得小时候,家里只有一个钟表用来看时间(含有时针、分针、秒针的那种),挂在墙上哒哒哒响个不停,现在生活条件好了、基本人
- 使用MySQL,目前你可以在三种基本数据库表格式间选择。当你创建一张表时,你可以告诉MySQL它应该对于表使用哪个表类型。MySQL将总是创
- Python之Web框架Django项目搭建全过程IDE说明:Win7系统Python:3.5Django:1.10Pymysql:0.7.
- 众所周知,凡是用 FrontPage 做的网页里面都有类似这样的标记:<META content="Microso
- pytorch里面的maxpool,有一个属性叫ceil_mode,这个属性在api里面的解释是ceil_mode: when True,
- 一、view实现计数在apiviews.py中加入以下内容from ApiTest.models import ApiTestfrom dj
- 聚焦爬虫:爬取页面中指定的页面内容。编码流程:1.指定url2.发起请求3.获取响应数据4.数据解析5.持久化存储数据解析分类:1.bs42
- python 容器总结整理list可变数组tuple不可变数组dict键值对(key-value)的字典(dictionary)初始化:a=
- 分组分组的目的:让服务端获得url中的具体数据,通过分组,把需要的数据按函数传参的方式传递给服务器后台1-无名分组若要从URL 中捕获一个值
- 我们在SQL Server Management Studio中写SQL 的时候,避免不了在浏览器和SSMS两者之间频繁切换,并浪费时间,殊
- 前言官方手册:https://dev.mysql.com/doc/refman/5.7/en/server-logs.html不管是哪个数据