当前位置： 移动技术网 > 科技>操作系统>windows > javaScript的预加载

javaScript的预加载

2019年08月13日  | 移动技术网科技  | 我要评论

曹艳,百家讲坛下载地址,抗日得从小抓起

在有大量图片的页面中，为了避免页面加载完图片还未加载完成，我们通常会使用js的图片预加载。

这是一个预加载的demo：

首先把图片放入到一个类名为imgsrcarr的变量当中：

var imgsrcarr = [

    ‘./imgs/01.png’,

    ‘./imgs/02.png’,

    ‘./imgs/03.png’,

    ‘./imgs/04.png’,

    ‘./imgs/05.png’

]

 

再用一个变量来储存要遍历的图片：

var imgwrap = [];

 

用一个函数来执行这个方法：

function preloadimg(arr) {

    for(var i = 0; i < arr.length; i ++) {

        imgwrap[i] = new image();

        imgwrap[i].src = arr[i];

    }

}

 

页面加载时执行此函数：

window.onload = function() {

    preloadimg(imgsrcarr);

}

 

在页面执行此函数：

$(function(){

    var imgsrcarr = [

        ‘./imgs/01.png’,

        ‘./imgs/02.png’,

        ‘./imgs/03.png’,

        ‘./imgs/04.png’,

        ‘./imgs/05.png’

    ];

    var imgwrap = [];

    function preloadimg(arr) {

        for(var i = 0; i < arr.length; i ++) {

            imgwrap[i] = new image();

            imgwrap[i].src = arr[i];

        }

    }

    window.onload = function() {

        preloadimg(imgsrcarr);

    }

})

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网