起风网jquery实现图片延时加载，实现原理：不设置img的src地址，把地址存在img的alt中，当img标签出现在可视区域，alt值传给src。为避免看到替换文本alt，把字体的颜色设置为背景的颜色，如果背景不是单一色就给个相近色吧，我把值存在alt里是想兼容IE等浏览器。
如果各位有更好的办法，欢迎留言！
html代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 5 <script type="text/javascript"> 6 7 $(document).ready(function(){ 8 var body = $("body"); 9 var offset = null; 10 var src = null; 11 //获取当前窗口的可见高度 12 var windowHeigth = $(window).height(); 13 //获取当前窗口的可见宽度 14 var windowWidth = $(window).width(); 15 body.find("img").each(function(){ 16 //获取图片的src属性 17 src = $(this).attr("alt"); 18 //获取图片的绝对位置 19 offset = $(this).offset(); 20 if(offset.left >= $(window).scrollLeft() && offset.top >= $(window).scrollTop() && offset.left <= ($(window).scrollLeft() + windowWidth) && offset.top <= ($(window).scrollTop() + windowHeigth)){ 21 //先隐藏 再淡入 22 $(this).css("display","none"); 23 $(this).attr("src",src).removeAttr("alt").fadeIn("slow"); 24 } 25 }); 26 27 28 }); 29 30 $(window).on("scroll",function(){ 31 var body = $("body"); 32 var offset = null; 33 var src = null; 34 //获取当前窗口的可见高度 35 var windowHeigth = $(window).height(); 36 //获取当前窗口的可见宽度 37 var windowWidth = $(window).width(); 38 body.find("img").each(function(){ 39 //获取图片的src2属性 40 src = $(this).attr("alt"); 41 if(src){ 42 //获取图片的绝对位置 43 offset = $(this).offset(); 44 if(offset.left >= $(window).scrollLeft() && offset.top >= $(window).scrollTop() && offset.left <= ($(window).scrollLeft() + windowWidth) && offset.top <= ($(window).scrollTop() + windowHeigth)){ 45 //先隐藏 再淡入 46 $(this).css("display","none"); 47 $(this).attr("src",src).removeAttr("alt").fadeIn("slow"); 48 } 49 } 50 }); 51 52 }); 53 54 55 </script> 56 57 <style> 58 #test{width:180px;float:left;} 59 #test img{width:180px;margin-top:20px;height:100px;float:left;color:#FFF;} 60 .a{width:2000px;height:200px;float:left;} 61 </style> 62 63 64 </head> 65 <body> 66 <div id="test"> 67 <img alt="http://img0.bdstatic.com/img/image/shouye/mxly-9537473768.jpg"/> 68 <div class="a"></div> 69 <img alt="http://img0.bdstatic.com/img/image/shouye/mcpwb-9530134528.jpg"/> 70 <img alt="http://img0.bdstatic.com/img/image/shouye/shouyegx2b.jpg"/> 71 <img alt="http://img0.bdstatic.com/img/image/shouye/gxxhbjdl-10011146040.jpg"/> 72 <img alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg"/> 73 <img alt="http://img0.bdstatic.com/img/image/shouye/qcqctj-9902962988.jpg"/> 74 <img alt="http://img0.bdstatic.com/img/image/shouye/qcbaoma3.jpg"/> 75 <img alt="http://img0.bdstatic.com/img/image/shouye/lypjd54.jpg"/> 76 <img alt="http://img0.bdstatic.com/img/image/shouye/sjjdsj-4855163457.jpg"/> 77 <img alt="http://imgstatic.baidu.com/img/image/f9dcd100baa1cd114a9ecc2ebb12c8fcc3ce2d97.jpg"/> 78 <img alt="http://img0.bdstatic.com/img/image/shouye/jjcy-9567536987.jpg"/> 79 <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> 80 <img alt="http://img0.bdstatic.com/img/image/shouye/jjct-10067496396.jpg"/> 81 <img alt="http://img1.bdstatic.com/img/image/364d6ca7bcb0a46f21f6421031ef4246b600c33ae62.jpg"/> 82 <img alt="http://img0.bdstatic.com/img/image/shouye/lypjd54.jpg"/> 83 <img alt="http://img0.bdstatic.com/img/image/shouye/bzxingk.jpg"/> 84 <div class="a"></div> <div class="a"></div> <div class="a"></div> 85 <img alt="http://img.baidu.com/img/image/fjbz.jpg"/> 86 <img alt="http://img0.bdstatic.com/img/image/shouye/bzdwbz-9448009724.jpg"/> 87 <img alt="http://img0.bdstatic.com/img/image/shouye/bzwmyj-9631167648.jpg"/> 88 <img alt="http://img0.bdstatic.com/img/image/shouye/dongmanyinhun-9583558925.jpg"/> 89 <img alt="http://img0.bdstatic.com/img/image/shouye/dmhyrz-9420648415.jpg"/> 90 <img alt="http://img0.bdstatic.com/img/image/shouye/dmzxh-11569510639.jpg"/> <img alt="http://img0.bdstatic.com/img/image/shouye/bzxingk.jpg"/> 91 <img alt="http://img.baidu.com/img/image/fjbz.jpg"/> 92 <img alt="http://img0.bdstatic.com/img/image/shouye/bzdwbz-9448009724.jpg"/> 93 <img alt="http://img0.bdstatic.com/img/image/shouye/bzwmyj-9631167648.jpg"/> 94 <div class="a"></div> <div class="a"></div> <div class="a"></div> 95 <img alt="http://img0.bdstatic.com/img/image/shouye/dongmanyinhun-9583558925.jpg"/> 96 <img alt="http://img0.bdstatic.com/img/image/shouye/dmhyrz-9420648415.jpg"/> 97 <img alt="http://img0.bdstatic.com/img/image/shouye/dmzxh-11569510639.jpg"/> 98 99 </div>100 101 </body>102 <html>
评论前必须登录！
立即登录