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>

  

时间: 2024-10-04 19:43:40

swiper.js 多图片页面的懒加载lazyLoading的相关文章

【JavaScript】使用纯JS实现多张图片的懒加载Lazy(附源码)

一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背景图 4.加载图片的时候,有渐进显示图片效果 二.难点 1)如何Ajax请求数据 2)如何动态将json数据绑定到html中. 3)如何通过对图片的定位计算,触发图片懒加载机制 4)加分项,显示图片时有渐现的过渡动画 三.前期知识点 1)Ajax相关知识,XMLHttpRequest对象,所有现代的

页面的懒加载

'lazyQueue': {}, 'isVisiable': function(elem) { if (!elem) return false; // console.log(($(window).scrollTop()+"::"+($(elem).offset().top+$(elem).outerHeight()))+"::"+(($(window).scrollTop()+$(window).height())+"::"+$(elem).o

前端性能优化--图片懒加载(lazyload image)

图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求.通俗的说就是你不要就不给你,怎么地.举个栗子,比如在进入某个页面的时候,它会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动下去或没看完整个页面,那么下面的图片就会"没用",加载了也白加载,而且还降低了网页的加

Vue 自定义图片懒加载指令v-lazyload

Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

vue项目中实现图片懒加载的方法

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实现方法(使用vue的vue-lazyload插件) 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vue-lazyload' 直接使用 Vue.use(VueLazyl

jQuery.imgLazyLoad图片懒加载组件

一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件jQuery.imgLazyLoad:使用该组件应在img标签中设置一个imglazyload-src属性,存放图片地址. 二.应用实例demo /** * component: imgLazyLoad 2013/12/12 华子yjh * invoking: jQuery.imgLazyLoad(

vue + vue-lazyload 实现图片懒加载

1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyload' // 404图片 import errImg from './assets/img/404.png' // loading图片 import loadingImg from './assets/img/loading-spin.svg' // 图片懒加载配置 Vue.use(VueLazylo

vue 图片懒加载v-lazy

搬运自:https://blog.csdn.net/twodogya/article/details/80223331 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, {     loading: require('img/loading.png'),//加载中图片     error: requi

【vue】vue-cli3构建项目中实现图片懒加载

前两天正好写了文章如何用实现图片懒加载[性能优化]JS实现图片懒加载,今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要,本想把前两天的代码直接copy过来的,后来想查查看有没有更简便的方法,果不其然,vue中直接有插件可以使用,看了下实现时候的效果,实现原理都和原生js是一样的,vue果然真香! 接下来我们来讲vue-lazyload插件的使用: 1.安装插件 cnpm i vue-lazyload -S 2.入口文件main.js中配置: import Vue from 'vue