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.目录就 ...
随机推荐
- Android Studio:Multiple dex files define Landroid/support/annotation/AnimRes
近期真的比較忙,一不小心博客又荒了两个月. 从今天起.决定重返csdn,多多纪录和分享. 先从一个近期被折磨的死去活来的问题. 由于升级了V4包,就一直报这个问题: com.android.dex.D ...
- 【Hibernate步步为营】--核心对象+持久对象全析(二)
上篇文章讨论了Hibernate的核心对象,在开发过程中经经常使用到的有JTA.SessionFactory.Session.JDBC,当中SessionFactory可以看做数据库的镜像,使用它可以 ...
- DataGridView使用技巧四:删除行操作
一.无条件的删除行 默认时,DataGridView是允许用户进行行的删除操作,选中要删除的行,按Delete键可以删除,该操作没有任何提示(只是删除界面显示的数据,不会真实删除数据库中的数据).如果 ...
- 几个Tab,滑动门,选项卡,图片切换
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- .net 高级写法总结
1.处理HTTP非正常的请求参数: [1] 获取相应的流转为string [2] request 的只读属性设置为可编辑,类似form [3] 转换为json对象 [4] 重设只读属性 //判断请求类 ...
- CSRF简单介绍及利用方法
x00 简要介绍 CSRF(Cross-site request forgery)跨站请求伪造,由于目标站无token/referer限制,导致攻击者可以用户的身份完成操作达到各种目的.根据HTTP请 ...
- ADT Android Development Tools
ADT(Android Development Tools)在Eclipse编译IDE环境中,需安装ADT(Android Developer Tools)Plug-in,这是Android在Ecli ...
- DirectoryEntry 账户启动与停用 以及创建账户等
启动账户: DirectoryEntry usr = new DirectoryEntry("LDAP://CN=New User,CN=users,DC=fabrikam,DC=com&q ...
- mysql -- 循环插入数据到表中
备忘: 1.经搜索发现,MySql不支持直接写SQL语句实现循环插入功能. 想要实现该功能,可以用其他语言操控MySql来实现,或者用存储过程来实现(Store Procedure--SP). 2 ...
- Git 基础 - 查看提交历史
查看提交历史 在提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,可以使用 git log 命令查看. 接下来的例子会用我专门用于演示的 simplegit 项目,运行下面的命令获取该项目源 ...