swiper的延迟加载(非官网方法)
网上找的: https://github.com/nolimits4web/Swiper/issues/626
var tabsSwiper = new Swiper('#games-content',{
onlyExternal : true,
speed:,
onSlideChangeStart : function(swiper) {
$( ".swiper-slide-active img" ).each(function ( index ) {
var src = $( this ).attr( "data-src" );
$(this).attr("src", src);
$(this).fadeOut().fadeIn();
})
}
}) //Load the First images
$( ".swiper-slide-active img" ).each(function ( index ) {
var src = $( this ).attr( "data-src" );
$(this).attr("src", src);
$(this).fadeOut().fadeIn();
})
自己写的swiper2的延迟加载
var bannerSwiper = new Swiper('.banner_picbox', {
pagination: '.banner_picfocus',
speed: ,
loop: true,
autoplay: ,
paginationClickable: true, // 当Swiper初始化完成
onSwiperCreated: function(swiper){
var current = $(".swiper-slide-active");
var origSrc = current.find("img").attr("src");
var dataSrcnext = current.next().find("img").attr("data-src");
current.next().find("img").attr("src", dataSrcnext);
}, // 当碰触到slider时执行
onSlideChangeStart : function(swiper) {
// $( ".swiper-slide-active img" ).each(function ( index ) {
// var dataSrc = $(this).attr("data-src");
// var origSrc = $(this).attr("src");
// if(dataSrc !== origSrc){
// $(this).attr("src", dataSrc);
// }
// })
var current = $(".swiper-slide-active");
var origSrc = current.find("img").attr("src");
var dataSrc = current.find("img").attr("data-src");
var dataSrcprev = current.prev().find("img").attr("data-src");
var dataSrcnext = current.next().find("img").attr("data-src");
current.find("img").attr("src", dataSrc);
current.prev().find("img").attr("src", dataSrcprev);
current.next().find("img").attr("src", dataSrcnext);
}
})
bannerWrap.hover(function(){
bannerSwiper.stopAutoplay();
},function(){
bannerSwiper.startAutoplay();
});
prev.on("click", function (e) {
e.preventDefault();
bannerSwiper.swipePrev();
}) next.on("click", function (e) {
e.preventDefault();
bannerSwiper.swipeNext();
})
swiper的延迟加载(非官网方法)的更多相关文章
- Ubuntu14.04下Mongodb官网安装部署步骤(图文详解)(博主推荐)
不多说,直接上干货! 在这篇博客里,我采用了非官网的安装步骤,来进行安装.走了弯路,同时,也是不建议.因为在大数据领域和实际生产里,还是要走正规的为好. Ubuntu14.04下Mongodb(离线安 ...
- Ubuntu16.04下Mongodb官网安装部署步骤(图文详解)(博主推荐)
不多说,直接上干货! 在这篇博客里,我采用了非官网的安装步骤,来进行安装.走了弯路,同时,也是不建议.因为在大数据领域和实际生产里,还是要走正规的为好. Ubuntu16.04下Mongodb(离线安 ...
- Spring官网下载dist.zip的几种方法
Spring官网下载dist.zip的几种方法 Spring官网改版后,很多项目的完整zip包下载链接已经隐掉了,虽然Spring旨在引导大家用更“高大上”的maven方式来管理所依赖的jar包, ...
- Spring官网jar包下载方法
Spring官网改版后,很多项目的完整zip包下载链接已经隐掉了,虽然Spring旨在引导大家用更“高大上”的maven方式来管理所依赖的jar包,但是完全没想到中国的国情,在伟大的墙内,直接通过ma ...
- Jquery各版本下载,附Jquery官网下载方法
jQuery version 2.1.1 http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js http://ajax.aspnetcdn.com ...
- surface 其实是UEFI与BIOS并存,借用官网的进入方法(少有更改)
surface 其实是UEFI与BIOS并存,借用官网的进入方法(少有更改) 第一种: 1. Swipe in from the right edge of the screen, and ...
- Spring众多jar包的特点,及Spring jar包官网下载方法
下面给大家说说spring众多jar包的特点吧,无论对于初学spring的新手,还是spring高手,这篇文章都会给大家带来知识上的收获,如果你已经十分熟悉本文内容就当做一次温故知新吧.spring. ...
- 官网下载Git方法
最近去官网下载Git,奇慢,下到一半直接挂掉,挂VPN也是一样 https://git-scm.com/ 今天学到一个方法,下载速度可以达到2m/s,那就是复制下载地址,用迅雷下载,可能是迅雷有P2 ...
- 2018年7月份,python上传自己的包库到pypi官网的方法
最近pypi官网进行了更新,老的上传网址作废了.记录下上传到pypi的方法 0.去pypi官网注册账号,没账号是不可能上传的,想想也是那不乱套了吗,注册后会收到一个邮件需要点击然后重新登录 1.目录就 ...
随机推荐
- Oracle分页(limit方式的运用)
select * from a_matrix_navigation_map where rowid not in(select rowid from a_matrix_navigation_map w ...
- wso2as安装
1.系统环境 Ubuntu12.04 192.168.0.97 root/password找管理员 Ubuntu12.04 192.168.0.99 root/password ...
- 释放Ubuntu/Linux系统cache,增加可用内存空间
某台式机Ubuntu内存共3G,但free的内存只有200M,无法满足scala的jvm需求. 注意用top命令查看才能看到真正的free内存.下面是查看真正内存使用量的另一种命令. watch -n ...
- Android XmlPullParser 笔记
使用XmlPullParser解析xml文件. 要解析的xml文件如下所示. weather.xml <?xml version="1.0" encoding="u ...
- C中入栈顺序和运算顺序有关系吗?
如下代码会怎么执行? printf( "%c,%c,%c\n", getchar(), getchar(), getchar() ); 实际测试,是倒序执行,感觉上符合“C函数的形 ...
- WaitForSingleObject()
参见:http://blog.csdn.net/xiaobai1593/article/details/6672193 1. 格式 DWORD WaitForSingleObject( HANDLE ...
- e1087. try/catch语句
The try/catch statement encloses some code and is used to handle errors and exceptions that might oc ...
- Building a Non-blocking TCP server using OTP principles
转自:https://erlangcentral.org/wiki/index.php/Building_a_Non-blocking_TCP_server_using_OTP_principles ...
- 【Java面试题】16 静态代码块,main方法,构造代码块,构造方法
public class HelloB extends HelloA{ public HelloB() { System.out.println("HelloB"); } { Sy ...
- Linux的缓存内存 Cache Memory详解
http://www.ha97.com/4337.html PS:前天有童鞋问我,为啥我的Linux系统没运行多少程序,显示的可用内存这么少?其实Linux与Win的内存管理不同,会尽量缓存内存以提高 ...