科技 > 操作系统 > windows

javaScript的预加载

50人参与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);

    }

})

您希望与广大热心网友互动!!点此进行留言回复

相关推荐

javaScript的预加载

08-13

安装Windows Server 2008

08-13

tessafe.sys 蓝屏怎么解决的方法介绍

05-26

系统升级为Win10后卸载AutoCAD 2012黑屏的解决方法

06-19

Win10 20H1新版18932发布:通知消息和目视控制大幅优化

07-05

win10预览版1607中kb3200970更新失败该怎么办?

06-28

新移动硬盘安装WinPE系统的完美图文教程

06-27

体会下 李楠点评华为鸿蒙

08-13

Win7系统开机提示igfxhk module已停止工作的两种解决方法图文教程

06-27

【Dos】复制指定文件夹下所有文件到另外指定文件夹下

12-09

最近更新

【Dos】复制指定文件夹下所有文件到另外指定文件夹下

12-09

官方结束支持不怕 黑客发布Win7更新破解工具:免费续期3年

12-09

对抗Windows?两大国产麒麟操作系统合并 打造统一OS

12-09

微软推送19037预览版更新:Win10 20H1开发基本完工

12-08

微软分析30亿个账户后发现:不少人使用已泄露的密码

12-08

Win32 API编程——前言

12-07

高通谷歌联合宣布新技术:Android R可以取代身份证和驾照

12-07

iPhone用户必升 iOS 13小技巧盘点

12-07

Win10 v1909正式版开启自动更新:v1809已能在线升级

12-07

【黑客基础】Windows PowerShell 脚本学习(上)

12-06

网友评论

已有0条评论