<!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. hdu 3911 Black And White(线段树)

    题目连接:hdu 3911 Black And White 题目大意:给定一个序列,然后有M次操作: 0 l r:表示询问l,r中最大连续1的个数 1 l r:表示将l,r区间上的数取反 解题思路:线 ...

  2. （大数据工程师学习路径）第一步 Linux 基础入门----简单的文本处理

    介绍 这一节我们将介绍这几个命令tr(注意不是tar),col,join,paste.实际这一节是上一节关于能实现管道操作的命令的延续,所以我们依然将结合管道来熟悉这些命令的使用. 一.常用的文本处理 ...

  3. Hadoop2.3.0具体安装过程

    前言:       Hadoop实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS.HDFS有高容错性的特点,并且设计用来部署在低廉的(low-co ...

  4. 安装 CentOS 7 后必做的七件事

    原文 安装 CentOS 7 后必做的七件事 CentOS 是最多人用来运行服务器的 Linux 版本,最新版本是 CentOS 7.当你兴趣勃勃地在一台主机或 VPS 上安装 CentOS 7 后, ...

  5. HDU1068/POJ1466_Girls and Boys(二分图/最大独立集=N-最大匹配)

    解题报告 http://blog.csdn.net/juncoder/article/details/38160591 题目传送门(POJ) 题目传送门(HDU) 题意: 求满足条件的最大集合:集合内 ...

  6. 十天学Linux内核之第九天---向内核添加代码

    原文:十天学Linux内核之第九天---向内核添加代码 睡了个好觉,很晚才起,好久没有这么舒服过了,今天的任务不重,所以压力不大,呵呵,现在的天气真的好冷,不过实验室有空调,我还是喜欢待在这里,有一种 ...

  7. .NET中使用Redis（二）

    很久以前写了一篇文章 .NET中使用Redis 介绍了如何安装Redis服务端,以及如何在.NET中调用Redis读取数据.本文简单介绍如何设计NoSQL数据库,以及如何使用Redis来存储对象. 和 ...

  8. JS 精度问题处理

    /除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显.这个函数返回较为精确的除法结果. //调用:accDiv(arg1,arg2) ...

  9. linux_环境变量设置 utf-8

    echo $LANG 显示编码  :  en_US.UTF-8  英文urf8有时显示程序输出是? 解决方法: vim ~/.bashrc 最后一行追加: export LANG=zh_CN.UTF- ...

  10. 小记NodeJS两项小技巧（与HTTP相关）

    1,兼容HTTP1.1和HTTP1.0 区别在content-length,1.0接受定长,不接受变长,导致transfer-encodeing的chunked模式无法识别,最终导致无法识别BODY. ...