<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片延迟加载</title>
<style>
img{display:block;width:350px;height:245px;background:url(data/attachment/album/201412/18/090710jlau0l5c0bauwv56.gif) center center no-repeat}
</style>
</head>
<body>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>

<script type="text/javascript">

var obj=document.getElementsByClassName("test"),i,t,h,timer;
for(i=0;i<obj.length;i++){
obj[i].url=obj[i].getAttribute("data-url");
obj[i].o=obj[i].offsetTop;
obj[i].again=false; //防止浏览器一直加载图片，这样图片加载成功后，滚动浏览器的时候就不会再加载图片了；
}
h=document.documentElement.clientHeight||900;

var test= function(obj){
t=document.body.scrollTop || document.documentElement.scrollTop;
if(t+h>obj.o&&obj.o>t){
obj.src=obj.url;
obj.again=true;
}
}

window.onscroll=window.onload=function(){

clearTimeout(timer);
timer=setTimeout(function(){
for(i=0;i<obj.length;i++){
if(!obj[i].again){
test(obj[i]);
}
}
},500)

};
</script>
</body>
</html>

javascript图片延迟加载（转载）的更多相关文章

  1. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  2. 前端页面优化：javascript图片延迟加载

    自己写了个简单的图片延迟加载小插件. 功能如下: 页面刷新,当前屏幕图片直接加载真实地址,body被卷去的部分和下方未显示的部分的img均加载通用图片如:loding.gif 随着屏幕上下滚动加载相应 ...

  3. 简单的Javascript图片延迟加载库Echo.js

    简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...

  4. javascript 图片延迟加载

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. Javascript 图片延迟加载之理论基础

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. javascript实现图片延迟加载方法汇总(三种方法)

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

  7. jquery图片延迟加载 及 serializeArray、serialize用法记录

    1.使用jquery实现 图片延迟加载 由于用户访问页面需要加载很多的图片,延迟加载技术在电子商务网站领域越来越普及,淘宝商城,京东商城,凡客等访问量巨大的电子商务站点为了增加用户用户体验,访问速度以 ...

  8. jQuery图片延迟加载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 效果展示 http://hovertree.com/texia ...

  9. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

随机推荐

  1. 编程算法 - 圆圈中最后剩下的数字(循环链表) 代码(C++)

    圆圈中最后剩下的数字(循环链表) 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 0,1...,n-1这n个数字排成一个圆圈, 从数字0開始 ...

  2. ubuntu下安装myeclipse

    一.下载myeclipse 官网下载:http://www.myeclipseide.com/ 我使用的是myeclipse pro 2014.run,重命名为myeclipse.run 示例路径:/ ...

  3. Testin一日游实验室发布的行级APP质量报告:在那里拍携程双赢

    Testin实验室公布国庆出行旅途类APP质量报告:携程力压去哪儿夺冠 2014/09/28 · Testin · 实验室报告 一年一度的十一黄金周即将临近,旅游软件成为每外出行人手机必装软件.为此全 ...

  4. unity节目素材ProceduralMaterial采用

    有些效果substance物质的.然而,对房地产的材料可以不寻常Material方法调用,必须ProceduralMaterial打电话. using UnityEngine; using Syste ...

  5. 从客户端(FCKeditor1="<p>...")中检测到有潜在危险的 Request.Form 值。

    从客户端(FCKeditor1="<p>...")中检测到有潜在危险的 Request.Form 值. 说明: 请求验证过程检测到有潜在危险的客户端输入值,对请求的处理 ...

  6. HTTP必知必会（转）

    HTTP协议作为网络传输的基本协议,有着广泛的应用.HTTP协议的完整内容很多,但是其核心知识却又简单精炼.学习者应该掌握其基本结构,并且能够举一反三.这篇文章所列的,就是在实际开发中必须知道必须掌握 ...

  7. js中frame的操作问题

    这里以图为例,在这里把frame之间的互相操作简单列为:1变量2方法3页面之间元素的互相获取. A  首先从 父(frameABC)------->子(frameA,frameB,frameC) ...

  8. WinForm LED循环显示信息，使用定时器Threading.Timer

    原文:WinForm LED循环显示信息,使用定时器Threading.Timer 这里用一个示例来演示timer如何使用.示例:LED屏幕显示描述:这个示例其实很简单,LED屏幕上显示3个信息:  ...

  9. ubuntu下一个rootusername入口mysql，如何查看username和password，如何改变rootpassword

    mysql -u root -p 按Enter键,提示时输入密码access denied......ues password YES/NO错误. 第一步: 然后,你需要输入/etc/mysql夹.然 ...

  10. Oracle 11g XE 是 Oracle 数据库的免费版本

    Oracle 11g XE 是 Oracle 数据库的免费版本,支持标准版的大部分功能,11g XE 提供 Windows 和 Linux 版本. 做为免费的 Oracle 数据库版本,XE 的限制是 ...