Question

我有一个图像加载，使用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");

});

Answer 1

如果您只想调整图像大小，使用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% */
}

请点击此处了解更多=＆gt; http://css-tricks.com/perfect-full-page-background-image/

Answer 2

请勿使用javascript调整图片大小。使用CSS和Html调整图像大小。在图像中添加div并调整div的高度和宽度，并将以下属性添加到图像中。

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

您也可以点击此链接How do I auto-resize an image to fit a div container

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

2 个答案: