本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码，供大家参考，具体内容如下
HTML代码
需要将图片的地址放到 data-src 属性里，而src值填写默认的一张图片。
CSS代码
所有具有data-src属性的图片，我们将其初始显示状态为不可见，通过透明度来调节：
opacity: 0;
}
JavaScript代码
我们最终会将 data-src 属性去掉，换成src属性，但这是图片加载成功后的动作：
相比起其它各种的图片延迟加载技术，这种方法非常的简单，它几乎不要求其它任何条件，可以用在任何地方，使用起来非常灵活。
当然，简单有简单的好坏，也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术，还是要看场景而定。
下面是
lazyload.js
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);
})
}
};
