<!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. Qt Quick 布局演示

    于 Qt Widgets 于,我们经常使用许多布局管理器来管理界面 widgets . 于 Qt Quick 实际上,有两个相关的管理和布局库,所谓集 Item Positioner ,所谓集 Ite ...

  2. js 通信

    js 页面间的通信 看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭 ...

  3. 高性能网络server--I/O复 select poll epoll_wait之间的差

    一个.select 方式作为收集,最多只能监控1024描述叙事断裂的文件,内部使用位操作,相应的位置1或设置0,必须是可读.可写.三类除单独的事件,内部查询方法.将全部的套接字从内核到用户空间之间进行 ...

  4. 如何使用Linq或EF来对数据去重——Distinct方法详解

    刚开始接触LINQ时使用distinct去重时和大家一样遇到了一些麻烦,很感谢 http://www.cnblogs.com/A_ming/archive/2013/05/24/3097062.htm ...

  5. 【转】UIAutomator定位Android控件的方法实践和建议(Appium姊妹篇)

    原文地址:http://blog.csdn.net/zhubaitian/article/details/39777951 在本人之前的一篇文章<<Appium基于安卓的各种FindEle ...

  6. Msgbox消息框

    于"自"<软件开发工具>一本书有这样的制剂,让我回忆--程序员可以做,让用户做:它允许用户做的少,即使是那些谁需要做的程序设置.我们应该做的. 这不是宣言.该是践行. ...

  7. 编程算法 - 第一个仅仅出现一次的字符 代码(C)

    第一个仅仅出现一次的字符 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 在字符串中找出第一个仅仅出现一次的字符. 字符是char类型, 所以匹 ...

  8. uploadfiy 动态传递Form 参数

    参见 百度 http://jingyan.baidu.com/article/a3a3f8118b1c4d8da3eb8a60.html @{    ViewBag.Title = "Ind ...

  9. linux 内核睡眠与唤醒

    休眠(被阻塞)的进程处于一个特殊的不可执行状态.进程休眠由多种原因,但肯定都是为了等待一些事件.事件可能是一 段时间从文件I/O读取更多数据,或者是某个硬件事件.一个进程还由可能在尝试获取一个已被占用 ...

  10. 在线预览Excel

    遇到的问题各种多 <system.web>        <identity impersonate="true" userName="Administ ...