第一:lazyLoad简介及作用:

网站性能优化的插件,提高用户体验。

页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载。

第二:使用场合

 涉及到图片,falsh资源,iframe,网页编辑器(CK),JS文件 等占用较大带宽,避免网页打开时加载过多资源,让用户等待太久。

第三:代码使用

1.导入JS插件(前提有 1.6.2.js文件)

<script src="js\jquery.lazyload.js" type="text/javascript"></script> 

2.在你的页面中加入如下:

<script type="text/javascript"> $("img").lazyload();
</script> 

所以图片都延迟加载。

3.设置敏感度区域

插件提供了 threshold 选项

$("#xd").lazyload({ threshold : 200 })

将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片. (这一句原文的字面意思和本人理解不一致, 原文: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

4. 还有涉及到 高级应用,触发事件,多参数等等。详细见参考 url

参考:

加载 图片 :http://www.cnblogs.com/szytwo/archive/2012/12/27/2836141.html

加载 js 文件:

5.使用jQuery.Lazyload延迟加载图片后 在img标签会多加一条属性data-original="图片地址"(data-original可以自定义)我的问题是成功加载图片后,如何自动移除这条自定义的属性。

------解决方案--------------------
可以修改lazyload插件,在加载完毕每张图片执行还原原图片后移除data-original属性

$(this).removeAttr('data-original');

转载于:https://www.cnblogs.com/yzadd/p/6494579.html

jquery-懒加载技术(简称lazyload)相关推荐

  1. javascript 懒加载技术(lazyload)简单实现

    1.前言 懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷 ...

  2. “懒”的妙用——浅析图片懒加载技术

    1.定义 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解决这种问题,通过前 ...

  3. Python:图片懒加载技术

    一. 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -*- import reques ...

  4. Python网络爬虫之图片懒加载技术、selenium和PhantomJS

    引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...

  5. vue“路由懒加载” 技术,让网页快速加载 (优化篇)

    (含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载 所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...

  6. html如何实现页面懒加载,浏览器HTML自带懒加载技术

    对于目前的图浏.富混工就划这些本公的响示近览记的迹更片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按插者几天网后供小来剑思含程个些结十在必页到别则气底.时效器按 ...

  7. html 语音 懒加载,浏览器HTML自带懒加载技术

    对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行: 1.加载初始的 HTML 响应内容 2.加载懒加载库 3.加载图片 假如浏览器能直接支持 ...

  8. JS里面的懒加载(lazyload)

    懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载 涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占 ...

  9. 在ThinkPHP框架(5.0.24)下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库,同时实现lazyload懒加载...

    这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...

最新文章

  1. AI 时代保护儿童刻不容缓!智源研究院发布我国首个儿童人工智能发展原则《面向儿童的人工智能北京共识》...
  2. python opencv 4.1.0 cv2.convertScaleAbs()函数 (通过线性变换将数据转换成8位[uint8])(用于Intel Realsense D435显示depth图像)
  3. 面试官问:什么是布隆过滤器?
  4. 【Java】Volitile的作用、JVM规范如何要求内存屏障、硬件层级内存屏障如何帮助java实现高并发 - 第二天笔记
  5. matlab组织的培训讲义,matlab培训讲义.doc
  6. php 导出excel 特殊字符,PHPEXCEL导出,存在特殊字符遇到的问题
  7. vue键盘抬起_vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
  8. python3.7安装包下载_Python 3.7下载 Python 3.7 for win32 (Python编程开发工具)官方安装版 下载-脚本之家...
  9. iOS 8 Xcode6 设置Launch Image 启动图片转
  10. C#基础 数据类型 类型转换
  11. 【原创翻译】文本编辑器
  12. 抖音招商团长入驻条件
  13. 转载:技术大停滞——范式春梦中的地球工业文明5:台阶前的坑:人类社会的宿命
  14. ikbc键盘c104的按键设置
  15. 更新:扫码即可实现丨用脚本快速查看自己被多少微信好友删除
  16. 嵌入式系统设计师学习笔记二十八:嵌入式程序设计③——高级程序设计语言
  17. Unity Shader入门
  18. 旅游行业“春来早”,走着瞧旅行云南踏青游正火爆
  19. 网站推广优化教程100条(SEO,网站关键字优化,怎么优化网站,如何优化网站关键字)
  20. vue之var和let声明变量

热门文章

  1. Linux没有安装gcc如何在线安装(直接在Linux终端安装)
  2. 端口---汇编学习笔记
  3. Java8新特性之函数式接口
  4. 数据结构与算法 -- 二叉树 ADT
  5. android WebView详解,常见漏洞详解和安全源码(下)
  6. 技术讨论 | 一次尚未完成的薅羊毛行动
  7. 区块链学堂(3):Solidity
  8. 深度学习指南:在iOS平台上使用TensorFlow
  9. 以Binder视角来看Service启动
  10. php ajax 框架,PHP开发框架kohana中处理ajax请求的例子