<!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. Java它配备了一个很好的工具2

    Jconsole 本机java自带的系统monitor具,它也可以连接到的本地远程连接java process,联系java process申请后可查看CPU,内存,主题.GC事件,能帮忙看看系统是否 ...

  2. Linux/UNIX先进I/O

    先进I/O 非阻塞IO 非阻塞I/O因此,我们可以称之为open.read和write这种I/O操作,而这些操作不会永久阻止.我们假设,该操作不能完成,然后调用立即返回一个错误.则表示该操作将继续作为 ...

  3. CentOS 7 / RHEL 7 上安装 LAMP + phpMyAdmin

    原文 CentOS 7 / RHEL 7 上安装 LAMP + phpMyAdmin 发表于 2014-11-02 作者 Haoxian Zeng 更新于 2014-12-12   之前根据在 Lin ...

  4. I Love This Game 2115（结构体）

    Problem Description Do you like playing basketball ? If you are , you may know the NBA Skills Challe ...

  5. 框架搭建资源 （二） 添加M(模型)

    applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans xm ...

  6. JS常用方法总结，及jquery异步调用后台方法实例

    //前台接收get参数值 function getQueryString(name) {            var queryStrings = window.location.search.sp ...

  7. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 SharePoint中基于Web开发

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 SharePoint中基于Web开发         之前提到过, ...

  8. 汽车之家购买价格PC真正的原因阿拉丁

        网行业风起云涌,先是6月3号汽车之家天价竞购百度PC阿拉丁.接着今天又有消息说易车拿下百度移动阿拉丁.易车拿下百度移动阿拉丁能够想象.但PC阿拉丁被向来不屑流量购买,以自主流量自居的汽车之家拿 ...

  9. 又一次拾起C语言的威严

    自从用了C++,他的方便快捷一直用着屡试不爽,可是越用越认为程序不够清晰, 项目使用DSP,不得不把C++重写成C 速度没得说,很快 记录下看到的文章 少走弯路,学好C语言的推荐途径

  10. Atitit.ALT+TAB没反应车and 点击任务栏程序闪烁可是不能切换

    Atitit.ALT+TAB没反应车and 点击任务栏程序闪烁可是不能切换 1. 可能你的Alt+Tab键被别人禁用了,试下以下的方法: 1 2. 为什么要禁用Alt+Tab 1 3. ALT+TAB ...