Question

我正在设计一个具有相当大的背景图像的索引页面（我不想让它变小，因为我不希望图像在较大的屏幕上产生噪音和扭曲）而我想要的是什么时候您在显示内容之前访问该索引页面，以显示预加载器 .gif并预加载背景图像，并且仅在加载图像后才能看到内容。

我想要这个，因为我不希望PC上的规格较慢或网络连接不良的人看到该背景图像是如何逐行加载的。

CSS：

<style> 
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
</style>

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>

和HTML：

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

Answer 1

HTML

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

CSS

.notloaded{
    display:none;
}

JS

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

此技术与旧版浏览器不完全兼容。请参阅https://github.com/desandro/imagesloaded以使用有效的解决方案。

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

1 个答案: