Jquery 在打开页面之前预加载图像

我正在设计一个具有相当大背景图像的索引页面（我不想让它变小，因为我不希望图像在更大的屏幕上有噪音和扭曲），我想要的是当你访问该索引页面时，在显示内容之前，向您显示一个预加载程序.gif并预加载背景图像，并且只有在加载图像之后，您才能看到内容

我之所以想要这个，是因为我不想让PC上的速度较慢或互联网连接不好的人看到背景图像是如何逐行加载的

CSS:

#bg{位置：固定；顶部：0；左侧：0；}
.bgwidth{width:100%；}
.bgheight{高度：100%；}

Jquery：

<script>
    $(function() {   

        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();

        function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
            .removeClass()
            .addClass('bgheight');
        } else {
            $bg
            .removeClass()
            .addClass('bgwidth');
            }

        }

            theWindow.resize(function() {
                resizeBg();
            }).trigger("resize");

    });
</script>

$（函数（）{
var theWindow=$（窗口），
$bg=$（“#bg”），
aspectRatio=$bg.width（）/$bg.height（）；
函数resizeBg（）{
如果（（theWindow.width（）/theWindow.height（））

和HTML：

<img src="images/bg.jpg" id="bg" alt="">

HTML

JS

---

此技术与旧浏览器不完全兼容。请参阅使用有效的解决方案。

将您的代码放入，可以轻松理解并解决问题easily@SenthilRajan这里是：我用以下代码测试了我的代码（检查控制台，您应该有“false”和“true”：

.notloaded{display:none；}$（“#bg”）.load（function（）{console.log（$（this）.is（“：visible”）；$（this.removeClass(“notloaded”）；console.log（$（this.is（“：visible”）；}）；

<img src="images/bg.jpg" id="bg" alt="">

<img src="images/bg.jpg" id="bg" alt="" class="notloaded">

.notloaded{
    display:none;
}

$( "#bg" ).load(function() {
    $(this).removeClass("notloaded");
    resizeBg();
});