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.目录就 ...
随机推荐
- Python中的字符串操作总结(Python3.6.1版本)
Python中的字符串操作(Python3.6.1版本) (1)切片操作: str1="hello world!" str1[1:3] <=> 'el'(左闭右开:即是 ...
- Restful --- 让JSON回归单纯
设计模式才是软件哲学的根本.. 一种软件架构风格.设计风格,而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓 ...
- DBA不可不知的操作系统内核参数
背景 操作系统为了适应更多的硬件环境,许多初始的设置值,宽容度都很高. 如果不经调整,这些值可能无法适应HPC,或者硬件稍好些的环境. 无法发挥更好的硬件性能,甚至可能影响某些应用软件的使用,特别是数 ...
- C++构造函数后面的冒号
构造函数后加冒号是初始化表达式:有四种情况下应该使用初始化表达式来初始化成员:1:初始化const成员2:初始化引用成员3:当调用基类的构造函数,而它拥有一组参数时 4:当调用成员类的构造函数,而它拥 ...
- 百度搜索_Selenium WebDriver 环境搭建和错误调试_chromedriver_win32必须下载否则无法测试chrome
转自: http://www.360doc.com/content/14/0821/18/597197_403634783.shtml zTree 东西不多,我也一直使用着原始的人工测试手段,随着内 ...
- Mastering the game of Go with deep neural networks and tree search浅析
Silver, David, et al. "Mastering the game of Go with deep neural networks and tree search." ...
- CentOS系统中的passwd命令实用技巧小结
这篇文章主要介绍了Linux系统中的passwd命令实用技巧小结,是Linux入门学习中的基础知识,需要的朋友可以参考下 先来回顾一下passwd命令的基本用法: Linux passwd命令用来 ...
- sqlserver 字符串split
select value from TF_NJVALUES('3C457A2D-188B-4D99-A822-2968054E1FB8,3C457A2D-188B-4D99-A822-2968054E ...
- c++ mktime()
今天联系写一个日历的程序,需要算出月份中的第一天是星期几,用到了mktime()这个函数,感觉这个函数挺有用的,分享给大家. 原型:time_t mktime(struct tm *) 其中的tm结构 ...
- win10系统下cmd输入一下安装的软件命令提示拒绝访问解决办法
问题:win10系统安装了nvm,cmd命令提示不是内部或外部命令 解决:卸载nvm,重新安装,再一次输入nvm,发现正常显示: 问题:win10安装了nvm之后,安装node成功,输入node命令, ...