JS实现图片预加载

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Sensation_cyq/article/details/73649185

但是在首次加载的时候,需要加载的资源多,导致页面很慢,有些图片还没加载完,动画就已经执行完了,弄的用户体验很糟糕。

这几天有空闲时间,就想着优化一下,先加载些图片,让用户一开始的时候等待一些时间,用以提高后续的体验。

参考了网上的很多方法,代码如下:

        function preload(arr) {
            var newimages = [];
            for (var i = 0; i < arr.length; i++) {
                newimages[i] = new Image();
                newimages[i].src = arr[i];
            }
        }

        var imgs = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
        preload(imgs);
                    

图片预加载最常用的方法就是new一个Image对象,然后将该对象的src属性设置为要加载的URL路径,这就实现了图片的预加载。

那怎么判断图片是否真的加载完了呢,可以监听imageonload事件和onerror事件,无论图片加载成功还是失败,都会在这两个事件中调用,我们可以简单的用这个来计数,再判断下和传入的数组长度是否一致。

上面是最简单的预加载图片的方法,下面的稍微修改了下,

        function preload(arr) {
            var newimages = [], loadedimages = 0;
            var postaction = function(){};
            var arr = (typeof arr != "object") ? [arr] : arr;

            function imageloadpost() {
                loadedimages++;
                if (loadedimages == arr.length) {
                    //alert("图片已经加载完成");
                    postaction(newimages);
                }
            }

            for (var i = 0; i < arr.length; i++) {
                newimages[i] = new Image();
                newimages[i].src = arr[i];
                newimages[i].onload = function() {
                    imageloadpost();
                }
                newimages[i].onerror = function() {
                    imageloadpost();
                }
            }

            return {
                done: function(f) {
                    postaction = f || postaction;
                }
            }
        }

        var imgs = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
        preload(imgs).done(function(images) {
            console.log(images.length);
        });
                    

上面的那段代码中其实还返回了一个回调函数,用于处理在图片全部预加载完成后的操作。一开始也家了个判断,保证传入的数据都是数组形式。

阅读更多
换一批

没有更多推荐了,返回首页