本人渣渣一枚，技术一般，记录下笔记，大神勿喷，可以留下优化建议，谢谢

　　最近刚刚做了个展示型的网站，使用swiper搭的框架，因为图片比较多，所 以首次加载稍微有些慢，虽然压缩过了，但是尽可能的优化吧，刚开始找了个懒加载的一个插件，但没想到怎么跟swiper结合使用，就自己写了个方法，但原理是一样的，就是swiper除了首屏的图片加载以外，其他页面的图片不加载，也就是src属性不给赋值，然后当每次滑动到下一屏的时候图片在加载，可以优化初次加载过慢。

　　首先，除了首屏的图片正常加载以外，其他页面的img标签正常写入，但不给src赋值，自定义属性data-original=“img/secondPage/2_text.png”，自定义属性的值为你img中src所要加载的图片

　　　　<img class="dataImg" data-original="img/secondPage/2_text.png" data-original@2x="img/secondPage/2_text@2x.png" />

当然细心的同学会看到还有个data-original@2x的属性，其实很明显，做适配用的，这个一会在做解释。

　　然后js定义个函数

这个函数需要传个值，就是swiper下面每页的下标值index，然后循环每页的img，通过attr把data-original的值赋给src，当然你会看到一个判断，也可以看得出是判断设备的像素比的，然后加载不同倍数的图片，这就是上面定义data-original@2x的原因

　　最后调用，swiper有个方法是onSlideChangeStart，就是改变每一屏的时候执行，

　　

index值可以通过swiper的属性获取，当滑动的时候就可以加载下一屏的图片了，当然首屏的图片是提前加载好的，所以是!0的时候执行

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　请大神留下宝贵建议，谢谢

结合swiper使用图片懒加载的更多相关文章

  1. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  2. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  3. webapp图片懒加载实现

    图片懒加载在webapp上非常流行,应用的很广泛. 实现图片懒加载功能:zepto.picLazyLoad.min.js 引入类库 <script src="1.1.3/zepto.m ...

  4. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  5. jQuery.imgLazyLoad图片懒加载组件

    一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...

  6. 图片懒加载插件lazyload使用方法

    图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...

  7. js 图片懒加载

    图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...

  8. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  9. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

随机推荐

  1. javactript关闭窗体,刷新父窗体

    //关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("<script language=javascript>window.close();< ...

  2. Struts2--ModelDriven接收参数

    1. JSP文件调用格式: <a href="user/user!add?name=a&age=8">添加用户</a> 2. struts.xml文 ...

  3. Android编程中的实用快捷键

    作为一个优秀的程序员,不但要能开发出漂亮的软件,也要能熟练掌握编程的技巧,包括IDE的快捷键使用.比如linux 下的VI编辑器,对于不熟练快捷键的人来说就是一个噩梦,但一旦你熟练了VI的快捷键,VI ...

  4. SpringMVC文件上传报错org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.MultipartHttpServletRequest

    错误信息: java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to or ...

  5. 17.4.3 使用MulticastSocket实现多点广播（5）

    该类主要实现底层的网络通信功能,在该类中提供了一个broadCast()方法,该方法使用Multicast Socket将指定字符串广播到所有客户端:还提供了sendSingle()方法,该方法使用D ...

  6. psql命令

    原文:http://blog.csdn.net/smstong/article/details/17138355 psql# shell 环境下,查看当前所在的数据库的命令是: select  cur ...

  7. VC#2010 视图设计器无法打开 问题的正解

    继上次VC#2010中视图设计器无法打开的问题的讨论后,我感觉每次都重新安装一次安装包未免也太麻烦了,程序员的时间都灰常宝贵. 所以在这次人工智能作业的时候,找到了一个简单的途径: 打开VC#2010 ...

  8. php学习-数组（一）

    数组函数可以对大量性质相同的数据进行存储,排序,插入及删除等操作. 学习任务: 声明数组,输出数组,遍历数组,查询数组中指定元素,获取数组中的最后一个元素. 删除数组中重复的元素.统计数组中元素的个数 ...

  9. 乘方快速幂 OR 乘法快速幂

    关于快速幂这个算法,已经不想多说,很早也就会了这个算法,但是原来一直靠着模板云里雾里的,最近重新学习,发现忽视了一个重要的问题,就是若取模的数大于int型,即若为__int64的时候应该怎么办,这样就 ...

  10. 74HC166与TPIC6A595分析（转）

    源:Atmega162串行外设接口SPI 一.Atmega162的SPI接口基本概念与工作原理 SPI接口的全称是"Serial Peripheral Interface",意为串 ...