Javascript 调整背景图像的大小，但图像首先加载全尺寸 - 任何修复

Javascript resizes a background image, but the image loads full-size first - any fix?

本文关键字：图像 加载 全尺寸 任何修 背景 调整 Javascript      更新时间：2023-09-26

我有一个图像加载，它使用 javascript 调整大小以适应窗口，并且在调整浏览器窗口大小时图像会不断调整大小。但是，在 javascript 调整大小之前，图像会以全尺寸加载。因此，您会看到全尺寸图像，然后跳转到调整大小的版本。我可以解决此问题，以便仅加载调整大小的图像吗？

我已经破解了一个小工作，使图像可见性：隐藏，然后在javascript调整大小后，我设置了可见性：可见，但这不是最理想的解决方案。

任何帮助都会很棒，谢谢。

.HTML

<body>
    <img style="content:url(/uploads/user/bg_image/31/background.jpg) no-repeat fixed left top;" id="bg">
</body>

JAVASCRIPT

$(window).load(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");
});

如果你只想调整图像大小，使用 jquery 是矫枉过正的(假设你不是在寻找旧的浏览器支持(，试试这样：

div#bg { 
  background: url(img/bg.jpg) no-repeat fixed left top;; 
  -webkit-background-size: cover; /*or 100% 100% */
  -moz-background-size: cover;/*or 100% 100% */
  -o-background-size: cover;/*or 100% 100% */
  background-size: cover;/*or 100% 100% */
}

请参阅此处以获取更多了解=> http://css-tricks.com/perfect-full-page-background-image/

不要使用 javascript 调整图像大小。使用 CSS 和 HTML 调整图像大小。 向图像添加一个div 并调整div 的高度和宽度，并向图像添加以下属性。

max-width:100%;
max-height:100%;

您也可以点击此链接 如何自动调整图像大小以适合div 容器

相关文章：