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. 23.读懂 ECMAScript 规格

    读懂规格 读懂 ECMAScript 规格 概述 规格文件是计算机语言的官方标准,详细描述语法规则和实现方法. 一般来说,没有必要阅读规格,除非你要写编译器.因为规格写得非常抽象和精炼,又缺乏实例,不 ...

  2. async、await正确姿势

    摘要 async.await是在C# 5.0之后引入的一种简化异步操作的方式.使用它们之后,可以使我们的编写异步操作更加方便快捷,维护以及阅读起来更方便. 一个例子 async.await虽然简化了我 ...

  3. 10.C#知识点:操作XML

    知识点目录==========>传送门 XML是什么就不用说了文本标记语言. 主要纪录如何对XML文件进行增删改查. Xml的操作类都存在System.xml命名空间下面. 应用型的直接上代码 ...

  4. sqlserver设计器实现约束

    一.约束类型简介 二.创建数据表 三.创建主键约束和非空约束 四.创建唯一约束 选中任一列,右键--索引/键 点击 添加 生成IX_Employees*, 类型设置为 “唯一键”, 然后选择要约束的列 ...

  5. CAS实现的单点登录系统

    单点登录(single sign on ),简称SSO. 纯属学习用,对来自网络的部分如果侵害了您的权力,请联系我.QQ:262800095 SSO的定义是在多个应用系统中,用户只需要登录一次就可以访 ...

  6. Android - View的绘制你知道多少?

    https://github.com/android-cn/android-open-project-analysis/tree/master/tech/viewdrawflow Android-La ...

  7. C++ auto 关键字的使用

    C++98 auto 早在C++98标准中就存在了auto关键字,那时的auto用于声明变量为自动变量,自动变量意为拥有自动的生命期,这是多余的,因为就算不使用auto声明,变量依旧拥有自动的生命期: ...

  8. 【代码笔记】iOS-播放从网络上下载的语音

    代码: ViewController.m #import "ViewController.h" //录音 #import <AVFoundation/AVFoundation ...

  9. JS原生添加删除class的方法

    之前习惯了使用jquery的addClass的方法,然后就去找了下别人写的代码. [javascript] view plain copy function hasClass(obj,cls) { r ...

  10. OSGI企业应用开发(二)Eclipse中搭建Felix运行环境

    上篇文章介绍了什么是OSGI以及使用OSGI构建应用的优点,接着介绍了两款常用的OSGI实现,分别为Apache Felix和Equinox,接下来开始介绍如何在Eclipse中使用Apache Fe ...