js实现图片加载淡入淡出效果
作者:樱花烂漫0927 时间:2024-04-22 22:41:15
本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码,供大家参考,具体内容如下
HTML代码
首先是图片标记的写法:
<img data-src="/path/to/image.jpg" alt="">
需要将图片的地址放到 data-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');
};
});
相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。
当然,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。
下面是lazyload.js
var lazyLoad = {
init: function() {
var that = this;
that.onerrorImgUrl = "data-error"; //图片加载失败用什么图片替换
that.srcStore = "data-src"; //图片真实地址存放的自定义属性
that.class = "lazy-img"; //惰性加载的图片需要添加的class
that.sensitivity = 50; //该值越小,惰性越强(加载越少)
minScroll = 5,
slowScrollTime = 200;
document.addEventListener("scroll", function() {
that.changeimg();
});
setTimeout(function() {
that.trigger();
}, 100);
},
scanImage: function() {
var that = this;
var imgList = [];
var allimg = [].slice.call(document.querySelectorAll('img.' + that.class + ''));
allimg.forEach(function(ele) {
if (!that.isLoadedImageCompleted(ele)) {
imgList.push(ele);
}
});
that.imglistArr = imgList;
},
isLoadedImageCompleted: function(ele) {
return (ele.getAttribute('data-loaded') == '1')
},
trigger: function() {
var that = this;
eventType = that.isPhone && "touchend" || "scroll";
that.fireEvent(document, eventType);
//$(window).trigger(eventType);
},
fireEvent: function(element, event) {
// 其他标准浏览器使用dispatchEvent方法
var evt = document.createEvent('HTMLEvents');
// initEvent接受3个参数:
// 事件类型,是否冒泡,是否阻止浏览器的默认行为
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
},
changeimg: function() {
function loadYesOrno(img) {
var windowPageYOffset = window.pageYOffset,
windowPageYOffsetAddHeight = windowPageYOffset + window.innerHeight,
imgOffsetTop = img.getBoundingClientRect().top + window.pageYOffset;
return imgOffsetTop >= windowPageYOffset && imgOffsetTop - that.sensitivity <= windowPageYOffsetAddHeight;
}
function loadImg(img, index) {
var imgUrl = img.getAttribute(that.srcStore);
img.setAttribute("src", imgUrl);
img.onload || (img.onload = function() {
img.classList.remove(that.class);
img.setAttribute('data-loaded', 1)
img.removeAttribute('data-src');
//$(this).removeClass(that.class).getAttribute('data-loaded',1),
that.imglistArr[index] = null;
img.onerror = img.onload = null;
},
img.onerror = function() {
img.src = img.getAttribute(that.onerrorImgUrl);
img.classList.remove(that.class);
img.classList.add("lazy-err");
img.setAttribute('data-loaded', 0);
//$(this).removeClass(that.class).getAttribute('data-loaded',0),
that.imglistArr[index] = null,
img.onerror = img.onload = null
});
var newImgStack = [];
that.imglistArr.forEach(function(ele) {
//img标签可见并且加载未完成
if (!that.isLoadedImageCompleted(ele)) {
newImgStack.push(ele);
}
});
that.imglistArr = newImgStack;
}
var that = this;
that.scanImage();
that.imglistArr.forEach(function(val, index) {
if (!val) return;
var img = val;
if (!loadYesOrno(img) || that.isLoadedImageCompleted(img)) return;
if (!img.getAttribute(that.srcStore)) return;
loadImg(img, index);
})
}
};
标签:js,图片加载,淡入淡出
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
浅谈anaconda python 版本对应关系
2023-12-06 01:02:35
opencv python 傅里叶变换的使用
2022-07-27 14:55:03
![](https://img.aspxhome.com/file/2023/2/92472_0s.jpg)
Golang学习之平滑重启
2024-04-25 15:05:57
![](https://img.aspxhome.com/file/2023/8/134228_0s.png)
在ASP.NET 2.0中操作数据之三十:格式化DataList和Repeater的数据
2023-07-22 20:15:21
![](https://img.aspxhome.com/file/2023/9/76339_0s.png)
ASP.NET程序中用Repeater实现分页
2024-05-09 09:02:48
![](https://img.aspxhome.com/file/2023/6/129816_0s.gif)
公共Hooks封装报表导出useExportExcel实现详解
2024-04-28 09:21:36
Python中关于set的基本用法
2021-09-23 12:45:39
![](https://img.aspxhome.com/file/2023/5/95305_0s.jpg)
python 函数的缺省参数使用注意事项分析
2021-08-23 05:09:02
Python实现查询某个目录下修改时间最新的文件示例
2021-07-08 00:31:18
深入理解Python内置函数map filter reduce及与列表推导式对比
2022-06-30 21:39:11
浅析JavaScript对象转换成原始值
2023-08-05 02:09:11
Python使用pyecharts控件绘制图表
2023-11-08 17:59:54
![](https://img.aspxhome.com/file/2023/4/131184_0s.png)
新手如何安装Mysql(亲测有效)
2024-01-17 00:21:01
![](https://img.aspxhome.com/file/2023/6/105216_0s.jpg)
只有mdf文件的数据库附加失败的修复方法分享(置疑、只读)
2012-02-12 15:55:17
如何利用FFmpeg合并音频和视频(多种方式)
2022-03-09 10:58:58
Flask交互基础(GET、 POST 、PUT、 DELETE)的使用
2022-01-17 11:00:04
![](https://img.aspxhome.com/file/2023/8/79808_0s.png)
在数据库里将毫秒转换成date格式的方法
2024-01-19 01:27:00
vue实现移动端图片裁剪上传功能
2024-05-10 14:15:04
![](https://img.aspxhome.com/file/2023/8/126538_0s.jpg)
python基于windows平台锁定键盘输入的方法
2021-01-03 07:46:03
PHP 动态随机生成验证码类代码
2024-05-02 17:18:02
![](https://img.aspxhome.com/file/2023/3/129823_0s.jpg)