js实现图片加载淡入淡出效果
作者:樱花烂漫0927 发布时间:2024-04-22 22:41:15
标签:js,图片加载,淡入淡出
本文实例为大家分享了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);
})
}
};
0
投稿
猜你喜欢
- 安装报错类型,解决方案;1. 数据库连接报错mysqldb只支持python2,pymysql支持3,都是使用c写的驱动,性能更好# dja
- Python 直接连接mongodb数据库进行查询操作1、安装所需模块使用到的是pymongo模块,安装方法:pip instal
- 前言在字典中查找某一个值的时候,若key不存在就会返回一个keyerror错误而不是一个默认值,如果想要返回一个默认值可以使用default
- 1.Fork出来的Git仓库同步代码背景:有的时候从原仓库fork出了一个新仓库,这个新仓库做了自己的修改。可是原仓库也进行了更新,比如修复
- 微软上周发布了一份关于 Windows Internet Explorer 8 浏览器(以下简称为 IE 8)性能优化的白皮书《Window
- 首先,我们在VSTS中创建一Database Project,增一个class, 实现下面的一个方法: /// <summary>
- global语句的作用在编写程序的时候,如果想为一个在函数外的变量重新赋值,并且这个变量会作用于许多函数中时,就需要告诉python这个变量
- 相信只要学习python的同学对于虚拟环境这个概念肯定不会太陌生,虚拟环境指的是一个个单独隔离的python开发环境。各个虚拟环境之间互不干
- python除了关键字(keywords)和内置的类型和函数(builtins),更多的功能是通过libraries(即modules)来提
- JDK1.8安装下载打开链接: http://www.oracle.com/technetwork/java/javase/download
- 本文实例讲述了python根据给定文件返回文件名和扩展名的方法。分享给大家供大家参考。具体分析如下:这段代码可以根据文件的完整路径返回文件名
- Ubuntu 18.04下1、安装python 2._版本,输入 sudo apt install python命令行输入 python或p
- <?php/* Function Written by Nelson Neoh @3/2004. For th
- view.pyfrom django.views.generic import ListView,DetailViewfrom xxxx.m
- 1.定义aiohttp 是一个基于 asyncio 的异步 HTTP 网络模块,它既提供了服务端,又提供了客户端2.基本使用import a
- 前言上回在 用 Go 写一个轻量级的 ssh 批量操作工具 里提及过,我们做 Golang 并发的时候要对并发进行限制,对 goroutin
- 本文实例讲述了Python实现的矩阵类。分享给大家供大家参考,具体如下:科学计算离不开矩阵的运算。当然,python已经有非常好的现成的库:
- 1.代码编辑 字体大小设置进入 File—》Settings—》Editor—》Colors & Fonts—》Font中。首先要点
- 本文我们总结了几个在安装SQL Server数据库时常见问题的解决方案,供初学者学习参考,接下来让我们来一起看一下吧。常见问题一:安装Sql
- 前言控制文件(control file)是一个相当小的文件(最多能增长到64M左右),其中包含Oracle需要的其他文件的一个目录。参数文件