jquery 实现banner懒加载效果

最新推荐文章于 2022-07-09 10:30:05 发布

灵魂清零

最新推荐文章于 2022-07-09 10:30:05 发布

阅读量482

点赞数 2

分类专栏： HTML 文章标签： banner懒加载 banner预加载 banner第一次加载只加载一张图片

本文链接：https://blog.csdn.net/n_229397218/article/details/103763545

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

有时候，我们工作当中会遇到各种各样的需求，对于我们前端来说，为了做好本职工作，就得完成产品提出来的各种需求，提高用户体验度。今天分享一个优化小案例，工作当中经常会遇到的。banner图片的懒加载。

有时候我们做完banner图的动画效果，却很少考虑到它的性能好不好，我也是这样，有一次做web端网站的时候，产品给我提出一个问题，说我们网站banner图在网站加载的时候一次性给所有banner图全加载出来了，这样网站请求增加，网站加载过大，这样网站打开比较慢，用户体验会不好，要我优化一下，当网站首次打开的时候，只加载一张图片这样网站性能会好一些，网站打开更快，用户体验更好，下面是我整理的代码

html代码用的插件swipe.js

<div class="banner_adv">
	<div class="swipe-wrap">
		<div class="item">
			<a href="">
				<img src="images/banner.jpg">
			</a>
		</div>
		<div class="item">
			<a href="">
				<img data-src="images/banner.jpg">
			</a>
		</div>
		<div class="item">
			<a href="">
				<img data-src="images/banner.jpg">
			</a>
		</div>
	</div>
	<ul class="swipe-wrap-index swipe-cur">
		<li class=""></li>
		<li class=""></li>
		<li class="cur"></li>
	</ul>
</div>

js部分

$('.banner_adv').each(function() {
	if ($(this).find('.item').length < 2) {
		return;
	}
	Swipe(this, {
		startSlide: 0,
		speed: 400,
		auto: 3000,
		continuous: true,
		disableScroll: false,
		stopPropagation: true,
		callback: function(index, elem) {
			$('.swipe-wrap-index').find('li').eq(index).addClass('cur').siblings().removeClass('cur');
			var img = $('.swipe-wrap').find('.item').eq(index).find('img').attr('data-src');
			if(img){
				$('.swipe-wrap').find('.item').eq(index).find('img').attr('src',img).removeAttr('data-src');
			}
		},
		transitionEnd: function(index, elem) {
		}
	});
});