经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 数据库/运维 » Windows » 查看文章
javaScript的预加载
来源:cnblogs  作者:只只呀  时间:2019/8/15 11:54:48  对本文有异议

在有大量图片的页面中,为了避免页面加载完图片还未加载完成,我们通常会使用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);

    }

})

原文链接:http://www.cnblogs.com/Iwantecho/p/11344767.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号