zoukankan      html  css  js  c++  java
  • js图片预加载

    打开网页时,最慢最耗时的就是加载图片。而根据图片大小的不同,加载的时间也不一样。这是就会出现图片一部分加载呈现出来而另一部分还是空白的情况。从整体的体验来讲,这使得用户体验大大的降低了。

    而图片的预加载能很好的解决这一问题。

    这时,一般都会用到js里边的Image对象。
    function preLoadImg(url) {
     var oImg = new Image();
     oImg.src = url;
    }

    window.onload=function (){

      var oDiv=document.getElementById("div1");
      var loading=document.getElementById("loading");       //一个loading页面

      var arrImg=[];
      for (var i=0; i<图片数量; i++){

        preLoadImg(url);

        oImg.onload=function (){

          arrImg.push(this);                                       //已经加载的就推入数组
          loading.innerHTML="已加载"+arrImg.length+"/"+图片数量;                      //计算预加载了百分之多少
          if (arrImg.length==arr.length){                  //加载百分百
            loading.style.display="none";                 //loading也隐藏
            for (var i=0; i<arrImg.length;i++){

              oDiv.appendChild(arrImg[i]);          //用DOM将图片插入页面中
            }
          }
        }
      }
    }

    总结:整个预加载过程中图片早已经被加载完成,最后由DOM一起插入页面中显示出来,改善页面的用户体验。

  • 相关阅读:
    MySQL decimal unsigned 更新负数不报错却为0
    centos 安装jdk
    CentOS7安装docker
    Cron 时间元素
    PHPStorm
    日志习惯
    HTTP幂等性
    navicat for mysql 10.1.7注册码
    localStorage、sessionStorages 使用
    FreePascal
  • 原文地址:https://www.cnblogs.com/xipeiyang/p/4049401.html
Copyright © 2011-2022 走看看