強制某些JS文件和圖像加載之前，其他任何東西，包括JS文件

Question

因爲我的客戶的頁面有大量的Javascript，我添加頂部的移動版本的圖像輪播需要永遠在智能手機上呈現。我想加載旋轉木馬圖像然後輪換所需的文件（jQuery，旋轉木馬JS文件，carousell CSS文件）之前，包括JS，CSS等東西

是否有可能，如果是的話如何做到這一點？

Answer 1

試試這個方法：
Load Image from javascript

如果你可以先加載圖像，然後只用它的任何地方，他們將盡快加載的JavaScript的負載和你擁有一切之前把這個JavaScript（如你問）

而且，加載JS首先，你只需要把他們作爲第一，例如：

JQuery的必須被加載之前引導否則它將無法工作。

Answer 2

我有一個想法：

1. 負荷的jQuery第一。 [ADDED]

2. 不包含要延遲加載的js和css文件。

3. 爲你想延遲加載的js和css編寫一個javascript數組（按順序）（見下文）。

4. 在HTML與屬性識別所有的以後要加載。（只是用一個任意attr）使用

   <img src="_images/loadMeFirst.jpg" /> 
   
   <img src="_images/1x1.png" lazyLoad="_images/loadMeLater.jpg" /> 
   

5. 在文件齊全，經過所有lazyLoad圖像，重新分配SRC ATTR與lazyload src。

6. 在dom就緒之後，添加一個任意的窗口事件監聽器，可能是「LoadNextScript」，它會從數組中注入下一個。

7. 在每個注入的js文件的末尾添加一行以引發（任意）「LoadNextScript」事件。 （注：如果您沒有問題的腳本加載異步你可以跳過這個功能，只是加載它們像css文件。）

   $(window).trigger("LoadNextScript"); 
   

8. 的文件完整，提高第一（任意）「LoadNextScript」事件。

9. 在文檔完成後，從css數組中注入css文件。

JS：

window.lazyLoad = { 
    jsNextIndex: 0, 
    jsFiles: ["_js/file1.js", "_js/file2.js"], 
    cssFiles: ["_css/file1.css", "_css/file2.css"], 
    loadLazyImages: function() { 
     $('img[lazyLoad]').each(function() { 
      var $img = $(this); 
      $img.attr('src', $img.attr('lazyLoad')); 
     }); 
    }, 
    loadNextScript: function() { 
     // must add 
     // $(window).trigger("LoadNextScript"); 
     // at the end of each js file to be lazy loaded. 
     var sScriptSrc = window.lazyLoad.jsFiles[window.lazyLoad.jsNextIndex] || false; 
     if (sScriptSrc) { 
      $('<script type="text/javascript" src="' + sScriptSrc + '" />').appendTo($('body')); 
     } 
     window.lazyLoad.jsNextIndex++; 
    }, 
    loadAllCss: function() { 
     var $head = $('head'); 
     for (var i = 0; i < window.lazyLoad.cssFiles.length; i++) { 
      $('<link rel="stylesheet" href="' + window.lazyLoad.cssFiles[i] + '" type="text/css" media="screen" />'); 
     } 
    }, 
    domReady: function() { 
     // wire Lazy Script Event 
     $(window).bind('LoadNextScript', window.lazyLoad.loadNextScript); 

     // on window load complete (all non-lazy images) 
     $(window).load(function() { 
      // load all lazy images 
      window.lazyLoad.loadLazyImages(); 
      // load the css 
      window.lazyLoad.loadAllCss(); 
      // load/trigger the first script 
      window.lazyLoad.loadNextScript(); 
     }); 
    } 
}; 

jQuery(function ($) { 
    // init lazy loader 
    window.lazyLoad.domReady(); 
}); 

Answer 3

使用<script async="true" src="zyx.js" />和移動你的JS到頁面的底部。

Answer 4

您可以創建一個javascript方法來檢查所有圖像是否已加載。

var preLoadImages = function (arr) { 
    var newImages = [], // temparary variable containing loaded images 
     loadedImagesCount = 0; // 
    var postAction = function() {}; 
    var arr = (typeof arr != "object") ? [arr] : arr; // if a single image is sent, convert it into array 

    function imageLoadPost() { 
     loadedImagesCount++; 
     if (loadedImagesCount == arr.length) { 
      postAction(newImages) // postAction method 
     } 
    } 
    for (var i = 0; i < arr.length; i++) { 
     newImages[i] = new Image(); 
     newImages[i].src = arr[i]; 
     newImages[i].onload = function() { // call imageLoadPost when image is loaded 
      imageLoadPost(); 
     } 
     newImages[i].onerror = function() { // call imageLoadPost when error occurred because its also an success event which already checked whether mage is available or not 
      imageLoadPost(); 
     } 
    } 
    return { //return blank object with done() method 
     done: function (f) { 
      postAction = f || postAction // user defined callback method to be called when all images are loaded 
     } 
    } 
} 

// image array contains all images which you want to preload - currently having sample images 
var imgArr = ['http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png', 'http://doc.jsfiddle.net/_images/jsfiddle-desktop-thumbnail-a.png']; 
preLoadImages(imgArr).done(function (imgArr) { 
    alert('all images loaded'); 
    // call your carousel here 
}) 

在完成的方法中，您可以創建您的傳送帶。您需要將此方法添加到文件中，並將其放在加載JavaScript文件的堆棧的頂部。

JSFiddle link

Answer 5

假設您有解決您的客戶JS首次加載不implementing的事實moreelegantsolution - 你總是可以去的簡單的解決方案和async屬性添加到緩慢的腳本。

Here's an example

如果你不能做到這一點 - 這將是很好的瞭解你的限制，由於現有的代碼庫（你可以將例如script標籤）。

Answer 6

如果你正在做一個阿賈克斯負載的所有圖像在旋轉木馬，然後考慮使用 $.post這是async性質。