实现原理：

附：（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. ubuntu 软件使用

    1.制作iso: mkisofs -r -o file.iso your_folder_name/

  2. springcloud微服务config的使用

    首先需要建立一个server端: pom依赖中加入 <dependency> <groupId>org.springframework.cloud</groupId> ...

  3. <!-- -->是HTML的注释标签js，css注释

    <!-- -->是HTML的注释标签 js,css:单行注释以 // 开头. 多行注释以 /* 开始,以 */ 结尾. web大作业(Vip视频解析) <!-- 这个网页是vip视频 ...

  4. python学习，day1：循环判断基本语句的几个代码

    # coding=utf-8 # Author: RyAn Bi count = 0 '''while True : print('count:',count) count = count + 1 i ...

  5. [BZOJ 4850][Jsoi2016]灯塔

    传送门 #include <bits/stdc++.h> using namespace std; #define rep(i,a,b) for(int i=a;i<=b;++i) ...

  6. 本地安全策略命令行secedit设置本地账户安全策略

    我们日常运行的控制台程序secpol.msc里面的内容,实质可以通过命令行完成,下面演示通过secedit命令来设置本地账号密码策略,启用密码复杂性和强制长度至少8位操作办法. ==> 新建文本 ...

  7. 简单的html渲染模板引擎

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. PIE SDK打开网络地图数据

    1. 数据介绍 网络地图数据是在线地图服务发布出来的数据,其支持数据的网络查看和传输,极大的促进了GIS的发展. 目前PIE SDK支持百度地图.谷歌地图.高德地图.天地图.Bing地图.ArcGIS ...

  9. http statusCode(状态码) 200、300、400、500序列详解

    201-206都表示服务器成功处理了请求的状态代码,说明网页可以正常访问.200(成功) 服务器已成功处理了请求.通常,这表示服务器提供了请求的网页.201(已创建) 请求成功且服务器已创建了新的资源 ...

  10. 阿里云服务器对外开放tomcat端口访问

    今天第一次在阿里云服务器ecs上安装完成tomcat,然后启动tomcat之后.在本地输入ip:端口,发现不能访问. 出现这个的原因可能是你购买的服务器是 专有网络 类型的 如果是专有网络类型的服务器 ...