jQuery图片预加载的分析

最新推荐文章于 2021-04-13 18:41:13 发布

南大亚多

最新推荐文章于 2021-04-13 18:41:13 发布

阅读量351

点赞数 1

分类专栏：笔记图片预加载文章标签： jquery 图片插件 jquery图片预加图片预加载

本文链接：https://blog.csdn.net/yglt77/article/details/70173495

版权

笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

图片预加载

1 篇文章 0 订阅

订阅专栏

想着不用插件，自己试着实现图片预加载，然后写了个图片预加载的demo,有点粗糙。
原理：在图片元素下面存在一个“laoding”的图片，通过判断这个元素距离可视区域顶部的距离是否大于当前页面可视区域的高度，即 $('#lazy-index').offset.top < $(window).height() 或者document.getElementById('lazy-index').getBoundingClientRect().bottom < document.body.offsetHeight。

下面是DOM结构

    <img data-src="img/1.jpg" alt="">
    <img data-src="img/2.jpg" alt="">
    <img data-src="img/3.jpg" alt="">
    <img data-src="img/4.jpg" alt="">
    <img data-src="img/5.jpg" alt="">
    <img data-src="img/6.jpg" alt="">
    <img data-src="img/7.jpg" alt="">
    <img data-src="img/8.jpg" alt="">
    <img data-src="img/9.jpg" alt="">
    <img data-src="img/10.jpg" alt="">
    <img data-src="img/11.jpg" alt="">
    <img data-src="img/12.jpg" alt="">
    <img data-src="img/13.jpg" alt="">
    <img data-src="img/14.jpg" alt="">
    <img data-src="img/15.jpg" alt="">
    <img data-src="img/16.jpg" alt="">
    <div id="lazy-index">
        <img src="img/lazyload.jpg" alt="">
    </div>

下面是javascript

<script>
    $(function(){
        window_height  = $(window).height(); //可视区域的高
        getImg();//预加载图片
        /*页面滚动的时候加载图片*/
        $(document).scroll(function(){
            if(document.getElementById('lazy-index').getBoundingClientRect().bottom < window_height){
                getImg();
            }
        });
    });

 function getImg()
    {
        var img_list = $('img'); //所有图片
        var len = img_list.length;
        var img_arr = []; //待预加载的图片路径
        var img_item = [];
        for(var i=0;i<len;i++)
        {
            var img_obj = img_list[i];


                if(!img_obj.src){
                    img_item.push(img_list[i]);
                    if($(img_obj).data('src')){
                        img_arr.push($(img_obj).data('src')); //获取图片路径
                        $(img_obj).css('display','none'); //图片设置隐藏
                    }
                }
        }

        if(img_arr.length >0){
            setImg(img_arr,img_item);

        }else{
            console.log('图片已经全部加载完毕');
        }
    }

function setImg(img_arr,img_list)
    {

        var img=new Image();

        var n=0;
        img.src=img_arr[n];

        if(! img_list[n].src){
            img_list[n].src = img_arr[n];
            $(img_list[n]).fadeIn();
        }

        img.onload=function(){
            n++;
            if(n<img_arr.length){
                img.src=img_arr[n];
            }
            var lazy_heigh_img = document.getElementById('lazy-index').getBoundingClientRect().bottom;
            if(lazy_heigh_img < window_height ){
//                if(! img_list[n].src){
                    img_list[n].src = img_arr[n];
                    $(img_list[n]).fadeIn();
//                }

            }
        }

    }
</script>