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

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

HTML代码

首先是图片标记的写法：

rush:xhtml;">

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

CSS代码

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

rush:css;"> img { opacity: 1; transition: opacity 0.3s; }

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

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

JavaScript代码

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

rush:js;"> [].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

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="https://www.jb51.cc/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);
})

}
};

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