zoukankan      html  css  js  c++  java
  • javaScript的预加载

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

        }

    })

  • 相关阅读:
    DOM、Window对象操作
    JavaScript基础
    关于样式表的两个练习
    css样式表
    表单
    HTML的格式、内容容器、表格标签
    C#部分的总结
    Android自定义View之音频条形图
    String, StringBuilder, StringBuffer问题
    详解Java中ArrayList、Vector、LinkedList三者的异同点(转)
  • 原文地址:https://www.cnblogs.com/Iwantecho/p/11344767.html
Copyright © 2011-2022 走看看