夏日博客

A-A+

jQuery 图片延迟加载特效实现代码

2016年01月11日 前端设计 暂无评论 阅读 5 views 次

很多网站图片是在下拉滚动条时才加载，这种用户体验不错的效果可以通过 JavaScript 库 jQuery 实现的，本文来就这个特效详细解读。

风站延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 有些WordPress主题也具备了此功能。

目前我用的这个热点新闻主题由于有缩略图功能所以也试着加上看看效果如何。这里把这一功能应用到WordPress主题方法说一下，其实很简单，首先下载jquery.lazyloa.js，放到主题目录中，然后在header.php模板文件标签前添加如下代码：

  1. <script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.js"></script>  
  2. <script type="text/javascript">  
  3. $(function() {  
  4. $("img").lazyload({  
  5. effect : "fadeIn"  
  6. });  
  7. });  
  8. </script>   

其中img是延迟加载所有图片，也可以根据不同模板作相应改动，比如我这个主题，可以改成#post img，这样只延迟加载#post 容器内的图片，否则可能影响到侧边图片的加载，主要是留言者头像可能会最后加载；

fadeIn是图片显示效果

这样基本就可以了！

如果上面的功能可能没有达到你的要求，还有几个选项可供设置。

可以设置阀值来控制 灵敏度

$(“img”).lazyload({ threshold : 200 });

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

  1. $("img").lazyload({     
  2. placeholder : "img/grey.gif",     
  3. event : "click"    
  4. });    

还可以通过定义effect 参数来定义一些图片显示效果

  1. $("img").lazyload({     
  2. placeholder : "img/grey.gif",     
  3. effect : "fadeIn"    
  4. });   

事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

  1. $("img").lazyload({     
  2. placeholder : "img/grey.gif",     
  3. event : "click"    
  4. });   

延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.

  1. $(function() {     
  2. $("img:below-the-fold").lazyload({     
  3. placeholder : "img/grey.gif",     
  4. event : "sporty"    
  5. });     
  6. });     
  7. $(window).bind("load", function() {     
  8. var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);     
  9. });    

图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.

  1. CSS  
  2.   
  3.     #container {     
  4.     height: 600px;     
  5.     overflow: scroll;     
  6.     }    
  7.   
  8. JavaScript 代码:  
  9.   
  10.     $("img").lazyload({     
  11.     placeholder : "img/grey.gif",     
  12.     container: $("#container")     
  13.     });    

当图片不顺序排列,滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.

  1. $("img").lazyload({     
  2. failurelimit : 10     
  3. });    

别一段 Jquery延迟加载实现 代码

  1. //$(document).on("scroll", scrollcheck);  
  2.        //$(document).off("scroll", scrollcheck);  
  3.            //滚动条事件  
  4.            $(window).scroll(function () {  
  5.                //$(this).scrollTop() //滚动条当前高度  
  6.                //($(".imgdiv").offset().top 包含要加载图片div的高度  
  7.                //$("#loadimg").innerHeight() 加载图标自身高度  
  8.                //$(this).height() 浏览器可见高度  
  9.                if ($(this).scrollTop() > ($(".imgdiv").offset().top + $("#loadimg").innerHeight() - $(this).height())) {  
  10.                    //可以ajax请求放在这里... 获得数据后绑定到标签再隐藏加载图标  
  11.                    //$.getJSON("/main/...", {}, function () {  
  12.    
  13.                    //})  
  14. 　  
  15. 　　　　用定时模拟延迟加载，（数据获得和绑定应放在ajax中）  
  16.                    var i = 3;  
  17.                    var set = setInterval(function () {  
  18.                        i--;  
  19.                        if (i < 0) {  
  20.                            $("#loadimg").css("display", "none");  
  21.                            $(".imgs").css("display", "block");  
  22.                            clearInterval(set);  
  23.                        } else {  
  24.   
  25.                        }  
  26.                    }, 1000);  
  27.                 
  28.                }  
  29.            });  
  30.   
  31. <div style="height: 900px; height: 1500px;">  
  32.    </div>  
  33.    <div class="imgdiv">  
  34.        <img id="loadimg" src="dc64abc4c8b1956d0487bda279f87845.gif" />  
  35.        <div class="showimg">  
  36.            <img class="imgs" src="QQ图片20150422125945.png" style="display: none;" />  
  37.        </div>  
  38.    </div>  
  39.    <div style="height: 900px; height: 1500px;">  
  40.    </div>  
标签：

给我留言