jQuery实现页面滚动图片等元素动态加载(按需加载的实例)

原创
2014/04/13 23:35
阅读数 1.4W

    一、为什么写这篇博客?

        被逼的!!!哎、天天学习总感觉学不过来,知识太多了。前端是一个分秒飞速发展的过程,知识更新太快,好的作品陆续的出现,让我都喘不过气来了。这都是我小生的一些废话啦,回到主题吧!(return)。

    二、页面滚动加载图片的理解:

        我们知道当一个网页含有大量图片的时候,往往加载时间都会很慢,这里不考虑服务器多好,网速多块哈。如淘宝京东等大型电商网站。新闻类就是新浪等了。你可以想象一下,如果一下加载整个网页的所有图片,那会是一个缓慢的过程。在现今我们对知识的渴望性的的增加额,总想最快的浏览网页。所以这个时候我们就需要用到滚动时时加载的方法了!

    三、实现思路: 

        或许在你看见这个题目的时候,你就在思考怎么来实现了。。。没错就是你想的那样!“开始不给它放图片,等滚动到哪里的时候再获取!”但是问题出现了:我们知道如果在 src 中你不放入正确的图片地址。那么有的浏览器就会出现一个小红色的叉叉(×)图标。(这里你应该知道说的谁了哈)这样肯定是不行的。

        (1)所以必须是一个对的url地址。我们就用一张一像素的图片作为初始图片。

        (2)在滚动到图片出现在浏览器的可视范围时,在动态替换图片的url地址,这里的动态指的是使用js替换!

        如下:

<img data-url="img/4.png" src="img/pix.png" />

        这里的pix.png就是一张一像素的图片!至于 data-url 这是html5的新属性吧。你只需要知道怎样获得里面的值就对了。方法如下:(这里使用jquery)

$('img ').data('url'); //使用 data()方法获得里面的数据

   解决了这两个问题,那么就简单了,接下来就看怎么实现吧。

    四、需要你知道的?

    1、怎样获得浏览器的可视高度?

var windHight = $(window).height(); //获得浏览器的可视高度

    2、怎样获得滚动条相对于顶部的高度?

var scrollHight = $(window).scrollTop();//获得滚动条相对于顶部的高度

    3、怎样获得每张图片相对于浏览器顶部的高度?

var imgHight =  $('img').offset().top; //获得每张图片相对于顶部的高度

    4、怎样判断图片出现在了浏览器的可视窗口内部? 

imgHight - windHight < scrollHight  ? '成立的话就代表出现了' : '不成立就代表没出现';

    5、怎样排除首屏的图片?

imgHight - windHight > 0 //排除首屏的图片

    6、排除已经加载过的图片

$(this).attr('src') != $(this).data('url') //排除已经加载过的图片

    好了这样基本实现了!

    五、效果分析:

    看出结果了吧!实现了滚动加载的效果而且不会出现重复加载的情况!下面看浏览器的请求:

    


    看到这里也就基本完结了!最后贴出自己的代码这个代码看起我觉得很好理解,但是可能在性能上会有不足,还请你来提出意见!先谢谢了。

    温柔点击这里在线演示滚动加载图片

    看代码:

$(function(){
    var $wd = $(window),
        $img = $('img'),
        imgTop,          //图片距离顶部高度
        scTop,             //滚动条高度
        wH;           //窗口高度
    wH = $wd.height();         //获得可视浏览器的高度
    $wd.scroll( function() {
        scTop = $wd.scrollTop();       //获取滚动条到顶部的垂直高度
        $img.each(function(){
            imgTop =  $(this).offset().top;
            if(imgTop - wH < scTop &&     //图片必须出现在窗口底部上面
                imgTop - wH > 0 &&        //排除首页图片
                $(this).attr('src') != $(this).data('url')){          //排除已经加载过的图片
                   $(this).attr({
                       src: $(this).data('url')
                   });
            }
        });
    });
});

    完整代码下载,请温柔点击这里:源码下载 

    思考:

    问题出来,这里虽然是我直接排除的首屏图片,但是不同的电脑高度不一样,那么怎么来实现呢?两种解决方法:

        一、所有的图片初始都使用一像素的图片,用 load 事件遍历图片再显示。(缺点效率低)

        二、按照最大的显示视频计算初始高度,及最开始在首页中多写入几张进去。(相对好点)

    

    (本篇完)    

展开阅读全文
打赏
16
92 收藏
分享
加载中
打赏
11 评论
92 收藏
16
分享
返回顶部
顶部