javascript - 预加载器 - 此代码是否预加载任何内容？

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) 上调用的，这意味着它会等到当前页面的每个元素都已加载以触发处理程序，这里隐藏了动画。

简而言之，这段代码等待整个窗口完全加载然后隐藏动画。