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
投稿猜你喜欢
- 学习目标：对二值图进行分析，设定最大最小面积区间保留该面积区间内的区域示例代码//src为二值图，minArea、maxArea为面积阈值，
- 今天终于抽出时间瞟了一眼JavaScript的新标准ECMA262v5，让我欣喜的是，不像是因为过于激进而被废除的v4，这个新标准对Java
- 当我们使用访问一个没有声明的变量时，JS会报错；而当我们给一个没有声明的变量赋值时，JS不会报错误，相反它会认为我们是要隐式申明一个全局变量
- 以下函数可用于替换php内置的is_writable函数//可用于替换php内置的is_writable函数function isWrita
- 公式如下：rand() * (y-x) + x咱们学php的都知道，随机函数rand或mt_rand，可以传入一个参数，产生0到参数之间的随
- 在处理numpy数组，有这个需求，故写下此文：使用np.argwhere和np.all来查找索引。要使用np.delete删除它们。示例1i
- Pytorch提取模型特征向量# -*- coding: utf-8 -*-"""dj""
- Python argparse中的action=store_true用法前言Python的命令行参数解析模块学习。示例参数解析模块支持act
- MySQL有时候忘记了root密码是一件伤感的事。这里提供Windows 和 Linux 下的密码重置方法。Windows:1.以系统管理员
只要你的Web开发知识不是语文老师教的，那么你应该已经知道一个合格的开发者应该永远抱着怀疑的眼光看用户提交的数据。你不仅需要在前端通过表单或- 锁类型介绍MySQL 有三种锁的级别：页级、表级、行级1 表级锁：开销小，加锁快；不会出现死锁；锁定粒度大，发生锁冲突的概率最高, 并发度最
- XML即可扩展标记语言（eXtensible Markup Language）。标记是指计算机所能理解的信息符号，通过此种标记，计算机之间可
- 现在Django 3.0附带了对ASGI的支持，将Websockets添加到Django应用中不需要任何额外的依赖关系。 在本文中，您将学习
- 安装Python环境ANACONDA是一个Python的发行版本，包含了400多个Python最常用的库，其中就包括了数据分析中需要经常使用
- 1 将下面代码拷贝到一个文件，命名为asyncore.pyimport socketimport selectimport sysdef d
- 在最开始的时候所有的斐波那契代码都是使用递归的方式来写的，递归有很多的缺点，执行效率低下，浪费资源，还有可能会造成栈溢出，而递归的程序的优点
- 支持按照文件夹去批量处理，也可以单独一个文件进行处理，并且可以自定义标识符最近在开发一个答题类的小程序，到了录入试题进行测试的时候了，发现一
- 在查询语句中使用 NOLOCK 和 READPAST 处理一个数据库死锁的异常时候，其中一个建议就是使用 NOLOCK 或者 READPAS
- 目录一个可能你似曾相识的场景提升办公效率的法宝编码实现谷歌翻译爬虫Python 操作系统剪贴板项目地址妈妈再也不用担心我的英语了。一个可能你
- 复制是将主数据库的DDL和DML操作通过二进制日志传到从库上，然后再从库重做，从而使得从库和主库保持数据的同步。MySQL可以从一台主库同时
