swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html

设为true开启图片延迟加载,使preloadImages无效。
需要将图片img标签的src改写成data-src,并且增加类名swiper-lazy。
背景图的延迟加载则增加属性data-background(3.0.7开始启用)。

lazyLoadingInPrevNextAmount

设置在延迟加载图片时提前多少个slide。个数不可少于slidesPerView的数量。
默认为1,提前1个slide加载图片,例如切换到第三个slide时加载第四个slide里面的图片。

使用方法示例

<script>
var mySwiper = new Swiper('.swiper-container',{
lazyLoading : true,
lazyLoadingInPrevNext : true,
lazyLoadingInPrevNextAmount : 2,
})
</script>

 

callback

http://www.swiper.com.cn/api/callbacks/2014/1217/91.html

回调函数,swiper从当前slide开始过渡到另一个slide时执行。触摸情况下,如果释放slide时没有达到过渡条件而回弹时不会触发这个函数,此时可用onTransitionStart
可接受swiper实例作为参数,输出的activeIndex是过渡后的slide索引。

使用方法示例

 

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeStart: function(swiper){
alert(swiper.activeIndex);
}
})
</script>

  

swiper.js 多图片页面的懒加载lazyLoading的更多相关文章

  1. 【JavaScript】使用纯JS实现多张图片的懒加载(附源码)

    一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...

  2. 「Vue.js」Vue-Router + Webpack 路由懒加载实现

    一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...

  3. js-页面需展示大量图片时,采用lyz.delayLoading.min.js,图片在屏幕时加载显示

    本文本内容拷贝至:https://blog.csdn.net/xuanwuziyou/article/details/48199123 当一个网页中有大量图片时,浏览器会逐个去下载这些图片,等全部下载 ...

  4. js 判断图片和视频是否加载成功

    图片: 失败: // 方法 1:更换图片地址 $('img').error(function(){ $(this).attr('src', '加载失败.png'); }); // 方法 2:隐藏它 $ ...

  5. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  6. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  7. Vue 自定义图片懒加载指令v-lazyload

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  8. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  9. jQuery懒加载插件 – jquery.lazyload.js简单调用

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. JavaScript学习总结(五)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  2. Incircle and Circumcircle(二分+几何)浙大月赛zoj3806(详解版)图

    Incircle and Circumcircle Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge A triangle is o ...

  3. Android - ANR小结

    Application Not Responding 在Android上,如果你的应用程序有一段时间响应不够灵敏,系统会向用户显示一个对话框,这个对话框称作应用程序无响应(ANR:Applicatio ...

  4. protocol buffer c#

    第一.打开vs中的Nuget

  5. document.head.appendChild(element) 在 IE8 及以下报错

    问题: 在开发中会遇到动态添加 script 标签的情况. 代码如下: var oScript = document.createElement('script'); oScript.src = 'd ...

  6. Django-url反向解析和命名空间

    一.urls硬编码 在反向解析和命名空间之前我们先来说说URLS硬编码,用django 开发应用的时候,可以完全是在urls.py 中硬编码配置地址,在views.py中HttpResponseRed ...

  7. 【代码笔记】iOS-增加右侧按钮

    一,工程图. 二,代码. ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup ...

  8. 安装php扩展包

    sudo apt-get install php5-gd curl libcurl3 libcurl3-dev php5-curl 重启Apache sudo service apache2 rest ...

  9. 2018-10-23 23:29:54 clanguage

    2018-10-23   23:29:54 clanguage 在 32 位环境以及 Win64 环境下的运行结果为: short=2, int=4, long=4, char=1 在 64 位 Li ...

  10. 稳聘App设计图分享

    摘要||潜心学习,无限开源,我是鸟窝,一只憨厚的鸟,联系我加微信:jkxx123321 很早期就想筹划上线一款招聘类App,一拖再拖,先做还没有上线. 下面的设计原图,为我UI徒弟所做,在此,表示万分 ...