jquery实现图片预加载

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_39025670/article/details/97321826

代码如下

<div class="box">
    <p>
        <a href="javascript:;" class="btn" data-control="prev">上一页</a>
        <a href="javascript:;" class="btn" data-control="next">下一页</a>
    </p>
    <img alt="pic" id="img" width="800" src="" />
</div>

<script src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    //无序加载 通过 $.each()方法对图片进行了同时加载
    //有序加载 是从imgs数组的第一张开始往后加载
    var imgs = [
        'http://img1.imgtn.bdimg.com/it/u=3349546634,3754791255&fm=26&gp=0.jpg',
        'http://d-pic-image.yesky.com/1080x-/uploadImages/2019/044/59/1113V6L3Q6TY.jpg',
        'http://img0.imgtn.bdimg.com/it/u=2960231721,1241541633&fm=26&gp=0.jpg',
        'http://img3.imgtn.bdimg.com/it/u=2094296397,2457159940&fm=26&gp=0.jpg'
    ];

    var len = imgs.length,
        count = 0,
        index = 0;

    $('#img').attr('src', imgs[index]);//加载第一张图片

    load();
    function load() {
        var imgObj = new Image();
        // 有序加载
        $(imgObj).on('load error', function () {
            if (count >= len) {
                //图片加载完毕
            } else {
                load();
            }
            count ++;
        });
        imgObj.src = imgs[count];
    }

    $('.btn').on('click', function () {
        if ('prev' === $(this).data('control')){//上一张
            index = Math.max(0, --index);
        } else { //下一张
            index = Math.min(len - 1, ++index);
        }
        document.title = (index + 1) + '/' + len;
        $('#img').attr('src', imgs[index]);
    });
</script>

实现图片预加载的关键代码是 new Image() ，例子中使用的是load事件和递归调用实现的有序预加载。