js如何实现图片加载淡入淡出效果-创新互联
这篇文章给大家分享的是有关js如何实现图片加载淡入淡出效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
HTML代码
首先是图片标记的写法：
需要将图片的地址放到 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如何实现图片加载淡入淡出效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网站名称：js如何实现图片加载淡入淡出效果-创新互联
网页网址：http://myzitong.com/article/cohjdd.html