預加載器-此代碼是否預加載任何內容？

Question

嘗試在我的網站上實施預加載器。 我發現下面的代碼似乎可以正常工作（至少在出現圖像之前，我看到了小的CSS動畫-請參閱此JSFiddle ）。

但是，看着JS代碼，我真的不確定它是如何工作的...

代碼的哪一部分標識所有圖片等均已加載，並且預加載器動畫可以停止？ 這是可靠的解決方案嗎？

非常感謝

JS：

var show_loader = function(){};
var hide_loader = function(){};
jQuery(document).ready(function($){

    /*Make Loader Height Same as Window*/
    $(".loader_cont").css("height",$(window).height());
    /*Make Loader Height Same as Window*/



    /*
    *
    *Window Resize
    *
    */
    $(window).resize(function(){
        move_bottom_border();
        fit_menu();
        $(".loader_cont").css("height",$(window).height());
    });
    /*
     *
     *Window Load
     *
     */
    $(window).load(function(){
        hide_loader();

    });
    /*Hide And Show Loader*/
    hide_loader = function(){
        $(".loader_cont").hide();
    }
    show_loader = function(){
        $(".loader_cont").css("height",$(window).height());
        $(".loader_cont").show();
    }
    /*Hide And Show Loader*/
});

HTML

<div class="loader_cont">
    <div class="bubblingG">
        <span id="bubblingG_1">
        </span>
        <span id="bubblingG_2">
        </span>
        <span id="bubblingG_3">
        </span>
    </div>
</div>
Then link to images...

CSS：

Answer 1

jQuery .load()函數在調用其元素並且其所有子元素完全加載時觸發。 在這里，它在$（window）上被調用，這意味着它將等待，直到當前頁面的每個元素都已加載以觸發處理程序，該處理程序在這里隱藏了動畫。

簡而言之，這段代碼等待整個窗口完全加載，然后隱藏動畫。