技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> js图片延时加载(jquery特效)

js图片延时加载(jquery特效)

浏览:3338次  出处信息

    前段时间朋友说让给做一个js延时加载图片人功能,原来也的网上见过这些,但是没有具体的研究。今天学习了下,发出来和大家一直分享。至于延时加载的好处我在这里就不说了,好多朋友都说可以减少服务器短时间的请求数量。

    一、原理分析

     1.可显示区域的的图片正常显示,不可显示的不去请求,

    2.当滚动滚动条时,计算可显示的图片,把图片的src的真实路径写入。

    二、代码    

    这里我用的是jquery来做的,当然大家如果明白了原理,用什么做都可以做出很不错的效果。

    下面看代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script src="http://blog.suiyidian.cn/texiao/jquery-1.3.1.js" type="text/javascript"></script>
<title>js图片延时加载特效</title>


<script type="text/javascript">

$(function(){
 
 
 var d = new Array();
for (i = 0; i < $("img").length; i++) {

 d[i] = $("img").eq(i).attr("name");

}

 

for (i = 0; i < $("img").length; i++) {

 if ($("img").eq(i).offset().top > document.documentElement.clientHeight + $(window).scrollTop()) {

  $("img").eq(i).attr("src", "hc.gif");

 } else {

  $("img").eq(i).attr("src", d[i]);
 }

}


$(window).scroll(function() {

 

 for (i = 0; i < $("img").length; i++) {

  if ($("img").eq(i).offset().top > document.documentElement.clientHeight + $(window).scrollTop()) {

   $("img").eq(i).attr("src", "hc.gif");

  } else {

   $("img").eq(i).attr("src", d[i]);
  }

 }


})
 
 
 })
</script>
</head>
<body>
<img name="http://hj.bbs.nen.com.cn/attachments/10063010304e0ab3ca1c10b81c.jpg" src="hc.gif"  />
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>

    这上面是代码,大家可以细细的研究一下,

    DEMO效果

建议继续学习:

  1. JQuery实现Excel表格呈现    (阅读:46514)
  2. 分享一个JQUERY颜色选择插件    (阅读:12629)
  3. jQuery插件---轻量级的弹出窗口wBox.    (阅读:9681)
  4. 10个强大的Ajax jQuery文件上传程序    (阅读:7750)
  5. jQuery的data()方法    (阅读:7572)
  6. jQuery性能优化指南    (阅读:7302)
  7. jQuery Color Animations颜色动画插件    (阅读:7068)
  8. 精于图片处理的10款jQuery插件    (阅读:6203)
  9. jQuery中getJSON跨域原理详解    (阅读:5612)
  10. 配合jquery实现异步加载页面元素    (阅读:5367)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1