js实现图片加载淡入淡出效果

前端之家收集整理的这篇文章主要介绍了js实现图片加载淡入淡出效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码,供大家参考,具体内容如下

HTML代码

首先是图片标记的写法:

需要将图片的地址放到 data-src 属性里,而src值填写默认的一张图片

CSS代码

所有具有data-src属性图片,我们将其初始显示状态为不可见,通过透明度来调节:

img[data-src] {
opacity: 0;
}

这样写的作用是什么?等当图片加载时,你就能看的效果了。

JavaScript代码

我们最终会将 data-src 属性去掉,换成src属性,但这是图片加载成功后的动作:

相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。

当然,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。

下面是

lazyload.js

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) {

//<a href="/tag/imgbiaoqian/" target="_blank" class="keywords">img标签</a>可见并且加载未完成
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);
})

}
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章