swiper.js 多图片页面的懒加载lazyLoading
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的更多相关文章
- 【JavaScript】使用纯JS实现多张图片的懒加载(附源码)
一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...
- js-页面需展示大量图片时,采用lyz.delayLoading.min.js,图片在屏幕时加载显示
本文本内容拷贝至:https://blog.csdn.net/xuanwuziyou/article/details/48199123 当一个网页中有大量图片时,浏览器会逐个去下载这些图片,等全部下载 ...
- js 判断图片和视频是否加载成功
图片: 失败: // 方法 1:更换图片地址 $('img').error(function(){ $(this).attr('src', '加载失败.png'); }); // 方法 2:隐藏它 $ ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- Vue 自定义图片懒加载指令v-lazyload
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- 前端性能优化--图片懒加载(lazyload image)
话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...
- jQuery懒加载插件 – jquery.lazyload.js简单调用
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- .37-浅析webpack源码之事件流make(4)
赶紧完结这个系列咯,webpack4都已经出正式版了. 之前的代码搜索到js文件的对应loader,并添加到了对象中返回,流程如下: this.plugin("factory", ...
- java的锁机制——synchronized
一段synchronized的代码被一个线程执行之前,他要先拿到执行这段代码的权限,在java里边就是拿到某个同步对象的锁(一个对象只有一把锁): 如果这个时候同步对象的锁被其他线程拿走了,他(这个线 ...
- Java 初/中级面试题及答案【详细】
1.Java的HashMap是如何工作的? HashMap是一个针对数据结构的键值,每个键都会有相应的值,关键是识别这样的值. HashMap 基于 hashing 原理,我们通过 put ()和 g ...
- 【15】模板方法模式(Template Method)
一.引言 提到模板,大家肯定不免想到生活中的“简历模板”.“论文模板”.“Word中模版文件”等.在现实生活中,模板的概念就是——有一个规定的格式,然后每个人都可以根据自己的需求或情况去更新它.例如简 ...
- sql语句之from子句
如何从表中查询一个字端的数据 select 字段名 from 表名: 演示:从s_emp表中把月薪查询出来 select salary from s_emp ; (分号代表结束) 如何从表中查询 ...
- Spring 概念
spring概念 1.spring是一个开源的轻量级的开源框架. 2.spring的核心主要分为两部分: (1)aop:面向切面编程,扩展功能不是修改源代码实现. (2)ioc:控制反转,比如有一个类 ...
- org.springframework.beans.factory.BeanDefinitionStoreException Invalid bean defi
org.springframework.beans.factory.BeanDefinitionStoreException: Invalid bean definition with name 's ...
- js-ES6学习笔记-Class(4)
1.Object.getPrototypeOf方法可以用来从子类上获取父类.因此,可以使用这个方法判断,一个类是否继承了另一个类. 2.super这个关键字,既可以当作函数使用,也可以当作对象使用.在 ...
- html area标签详解
<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像). area 元素总是嵌套在 <map> 标签中. 注:<img> 标签中的 use ...
- JavaScript基础知识之 每日一题(网上搜罗来滴)
1.返回什么类型 (function(){return typeof arguments;})(); 答案是:object 参考:https://developer.mozilla.org/en-US ...