实现原理：

附：（http://www.cnblogs.com/fishtreeyu/archive/2011/03/12/1982067.html）

把所有需要延时加载的图片改成如下的格式：

<img lazy_src="图片路径" border="0"/>

然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）

js实现图片延时加载的原理的更多相关文章

  1. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  2. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  3. 图片延时加载jquery.inview.js用法详解

    我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...

  4. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  5. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  6. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  7. picLazyLoad 图片延时加载，包含背景图片

    /** * picLazyLoad 图片延时加载,包含背景图片 * $(img).picLazyLoad({...}) * data-original 预加载图片地址 * alon */ ;(func ...

  8. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  9. 一段实现页面上的图片延时加载的js

    大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...

随机推荐

  1. springmvc相关配置和用法

    目录如下: 一.spring mvc 核心类与接口 二.spring mvc 核心流程图 三.spring mvc DispatcherServlet说明 四.spring mvc 父子上下文的说明 ...

  2. clustalX2使用以及相关的问题

    Clustalx的操作 第一步:输入序列文件. 第二步:设定比对的一些参数. 参数设定窗口. 第三步:开始序列比对. 第四步:比对完成,选择保存结果文件的格式 相关问题 CLUSTALX-是CLUST ...

  3. 计算hashCode通用计算公式

    1.java计算公式 @Override public int hashCode() { //设置初始值 ; //假设有效域为: name,age,idCardNo,incomeAnnual,sex, ...

  4. linux环境下安装python

    在linux系统中安装python解释器 打开官网www.python.org 选择合适的版本进行下载 将下载好的压缩包拖入Xshell中,依次输入一下命令即可 tar xf Python-.tar. ...

  5. [转] Ubuntu安装Fcitx以及Fcitx输入中文不显示候选词框的解决办法

    [From] http://blog.csdn.net/qq_21397217/article/details/52447263 1. 安装Fcitx所需组件 $ sudo apt install f ...

  6. PIE SDK自定义滤波

    1.算法功能简介 自定义滤波可以自由设置滤波模板,对数据进行处理,自定义滤波器的一般规则要求: ( 1) 滤波器的大小应该是奇数,这样它才有一个中心,例如 3x3, 5x5 或者 7x7.有中心了,也 ...

  7. JAVA WEB开发环境搭建

    JAVA WED开发环境搭建 JDK的安装和配置 到https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21 ...

  8. (转)Shell中read的用法详解

    Shell中read的用法详解 原文:http://blog.csdn.net/jerry_1126/article/details/77406500 read的常用用法如下: read -[pstn ...

  9. 抱歉最近朋友结婚去浪了几天~未来几天会正常更新.今天带来XML文件解析

    三种解析方法 DOM,SAX,XMLPullParse;你以为我要讲三种嘛 错 ,我只讲一种 ,其他两种我只是说下优缺点, 一.DOM解析器 优点: DOM解析器在解析XML文档时,会把文档中的所有元 ...

  10. lua实现List及Dictionary

    转载:http://www.maosongliang.com/archives/122 参考 http://blog.csdn.net/jason_520/article/details/541736 ...