Swiper + 图片懒加载

最近写网站有遇到图片懒加载的问题，在网上搜的大概有以下几种方法：

纯js，给图片加个class名（相当于标识），判断是否出现在当前滚屏的范围内
lazysizes插件（在网上搜的是这个对seo更好）
lazyload(js/jquery插件两种)
……

因为主要是Swiper插件里有很多图，所以滚屏加载基本没有什么意义。

其实Swiper（3.x）的API中有相关的方法，不过如果直接搜懒加载/延迟加载，没搜索结果。好了不废话了，搜lazyLoading后会出来相关的参数和函数。

代码如下：

<!-- Swiper -->
<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img class="swiper-lazy" data-src="..."><!-- swiper-lazy-preloader 这个就是转圈的那个“进度” --><div class="swiper-lazy-preloader"></div></div><div class="swiper-slide"><img class="swiper-lazy" data-src="..."><div class="swiper-lazy-preloader"></div></div><!-- ... 只写了两个示例，多的话用js拼接字符串就好 -->
</div>

// 初始化swiper
var swiper = new Swiper('.swiper-container', {nextButton: '...',prevButton: '...',slidesPerView : '...',spaceBetween : ...,/* * 设置为true -> 开启图片延迟加载* <img>的src属性改为data-src，class增加一个'swiper-lazy'* 如果直接用div，设置background，对应的改为data-background即可*/lazyLoading: true,lazyLoadingInPrevNext : true, // 这个为true时，↓才有用lazyLoadingInPrevNextAmount: 4 // 设置在延迟加载图片时提前多少个slide
});

Swiper + 图片懒加载相关推荐

swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
小程序swiper怎么让内容撑开高度_小程序瀑布流组件：支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
uni-app 图片懒加载
uni-app 图片懒加载功能实现图片懒加载,并且显示数组中,始终只有3张图片,上下滑动增加的同时,删除最开始的那一张.可以指定从总图片的第几张开始加载. 思路要实现上下滑动时的动画效果,我这里 ...
前端如何实现图片懒加载(lazyload) 提高用户体验
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
“懒”的妙用——浅析图片懒加载技术
1.定义图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解决这种问题,通过前 ...
按需加载图片（图片懒加载）
前言按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量.对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少. 原理 ...
python怎么加载图片-python爬虫--图片懒加载
图片懒加载是一种反爬机制,图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解 ...
template与图片懒加载
曲线救国的三种案例第一种:underscore.js的图片懒加载 1 <script id="t2" type="text/template"> ...

Swiper + 图片懒加载

Swiper + 图片懒加载相关推荐

最新文章

热门文章