Question

因为我的客户页面上有大量的Javascript，我在移动版上面添加的图片轮播需要永远在智能手机上呈现。我想在其他任何东西（包括JS，CSS等）之前加载轮播图像然后轮播所需文件（jQuery，carousel JS文件，carousell CSS文件）。

是否有可能，如果是的话怎么做？

Answer 1

尝试这种方式：
Load Image from javascript

如果您可以先加载图像然后只是在任何地方使用它们，它们会在加载javascript后立即加载，您必须将此javascript放在其他所有内容之前（如您所知）

并且，要首先加载JS，您只需将它们作为第一个，例如：

JQuery 必须在引导程序之前加载，否则无效。

Answer 2

您可以创建一个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 3

我有个主意：

首先加载jQuery。 [ADDED]
不要包含您想要延迟加载的js和css文件。
为你想要延迟加载的js和css写一个javascript数组（按顺序）。

在html中用属性标识你想要稍后加载的所有内容。（只使用任意的attr）

<img src="_images/loadMeFirst.jpg" />

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

在文档完成后，浏览所有lazyLoad图像，使用lazyload src重新分配src attr。
在dom ready上，添加一个任意窗口事件监听器，也许是“LoadNextScript”，它将从数组中注入下一个。
在每个注入的js文件的末尾，添加一行来引发（任意）“LoadNextScript”事件。（注意：如果您可以异步加载脚本，可以跳过此功能，只需像css文件一样加载它们。）
```
$(window).trigger( "LoadNextScript" );
```
在文档完成后，引发第一个（任意）“LoadNextScript”事件。
在文档完成时，从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 4

使用<script async="true" src="zyx.js" />并将您的JS移至页面底部。

Answer 5

假设你不得不解决这样一个事实：你的客户端JS首先被加载而没有implementing more elegant solution - 你可以随时找到简单的解决方案并将async属性添加到慢速脚本中。

Here's an example

如果您无法做到这一点 - 最好知道由于现有代码库而导致的限制（例如，您可以移动script标记）。

Answer 6

如果您正在旋转木马上对所有图像进行ajax加载，请考虑使用 $.post本质上是async。

强制某些JS文件和图像在包括JS文件在内的任何其他内容之前加载

6 个答案: