首页 > 其他 > 详细

图片延迟加载(用jq自己写的方法)

时间:2016-11-11 11:42:52      阅读:201      评论:0      收藏:0      [点我收藏+]
$(function() {
            $("img.lazy").attr("src","2.jpg");
            show();
            $(window).scroll(function () {
                show();
            });
            function show(){
                $("img.lazy").each(function () {
                    var clientH = window.screen.availHeight;
                    var $height = $(this).height();
                    var $scroll = $(window).scrollTop();
                    var $off = $(this).offset().top;
                    var $val=$(this).attr("data-original");
                    if ($off - $scroll < clientH) {
                        $(this).attr("src",$val);
                    }
                })
            }
            })

注:我写的这个方法,实现的效果是当图片的上边框显示在可视区域内时,把图片的真实路径赋值给src。

  如果需要让图片全部显示在可视区域时再换成真实src的话,需要把if判断中的条件换成   $off + $height - $scroll < clientH

首先给需要延迟加载的img标签加个class名lazy,然后把src的路径赋值给data-original,如下所示:

  <img class="lazy" data-original="images/xinan_searchLogo.png" />

然后引入jq文件,然后再把上边的js代码放上即可

思路:1、首先给所有需要延迟加载的图片,添加一个默认的图片(2.jpg),让页面刚开始加载时只加载一张图片

   2、当图片显示在可视区域时,把data-original的值赋给src属性

     3、首页刚进入页面时有些图片就显示在可视区域内 所以要首先执行下show方法。然后再让滚轴滚动时再执行show方法

  

图片延迟加载(用jq自己写的方法)

原文:http://www.cnblogs.com/dongxiaolei/p/6053604.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!