圖片預加載的三種方法

本文轉載自查看原文 2017-05-18 16:43 3879 JavaScript

lazyload插件

lazyload是jquer下的一個實現預加載的插件，cdn為：

http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.js

jquery的cdn：

http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

　　先引入文件

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.js"></script>

　　操作如下

    $(function (){
        $("img").lazyload({
            placeholder:"./loading.gif",   
            effect:"fadeIn",
            event:"mouseover"
        })
    })

　　placeholder是設置加載時的的loading圖片

　　effect是設置加載時的漸入效果

　　event是采用什么事件觸發加載，常用的是scroll mouseover click 等

　　關於lazyload的更多知識，可以上官網查看 http://appelsiini.net/projects/lazyload/

        <img data-original="http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg" alt="" class="lazy" >
        <img data-original="http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg" alt="" class="lazy" >

原生js

　　其中傳入參數必須為一個數組，數組里面存放的是圖片的src

        function preimg(arr){
            var img=[],
            for(var i=0;i<arr.length;i++){
                img[i]=new Image();
                img[i].src=arr[i];
            }

preimg(["http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg","http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg","http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg"])

<img src="http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg" alt="">
<img src="http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg" alt="">
<img src="http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg" alt="">
<img src="http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg" alt="">

　　　　Image對象有兩個常用的事件句柄，onload與onerror

ajax

　　ajax預加載的原理就是，先加載圖片文件的js和css，再給Image對象添加src，一共三個文件pre2.html preimgjs.js preimgcss.css

　　pre2.html

    <script >
    window.onload=function(){
        setTimeout(function (){
            var xhr=new XMLHttpRequest();
            //js
            xhr.open("GET","./preimgjs.js");
            xhr.send(null);
            //css
            var xhr2=new XMLHttpRequest();
            xhr2.open("GET","./preimgcss.css");
            xhr2.send(null);
            //img
            new Image().src = "http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg";
        },1000);

    }
    </script>
      <body>
    　　<img src="http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg" alt="">
　　　</body>

　　 preimgjs.js

    setTimeout(function (){
        
        setTimeout({
            var oHead=document.getElementsByTagName('head');

            var oCss=document.createElement("link");
            oCss.rel="stylesheet";
            oCss.href="./preimgcss.css";

            var oJs=document.createElement("script");
            oJs.src="./preimgjs.js";

            oHead.appendChild(oCss);
            oHead.appendChild(oJs);

            new Image().src="http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg"
        
        },1000)
    },1000)

　　　　preimgcss.css只是設定img的樣式就不上傳了

　　　　為什么在html文件中使用ajax加載js和css，js和css的加載不會影響當前預加載頁面。

總結

　　本質上后兩種方法都是一樣的，都是先建立一個Image對象，給img對象依次賦地址，達到預加載的情況

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js圖片預加載的三種方法異步加載js的三種方法 javascript實現圖片延遲加載方法匯總(三種方法) 如何放大圖片，教您三種方法！ [前端]圖片預加載方法 (一)JQuery動態加載js的三種方法 flask加載配置文件的三種方法 VC6.0加載lib文件的三種方法 QML中文件的加載（三種方法）頁面加載即執行JQuery的三種方法