jquery延迟加载
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="http://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>
![](https://images2015.cnblogs.com/blog/623144/201607/623144-20160704153736327-1290497568.png)
有没有人打赏?没有的话,那我晚点再来问问。
![](https://img2018.cnblogs.com/blog/623144/201903/623144-20190319194730266-1448057040.png)
关注大诗人公众号,第一时间获取最新文章。
---转发请标明,并添加原文链接---