Javascript調整了背景圖片的大小，但是該圖片首先加載了原尺寸-可以解決嗎？

Question

我有一個圖像加載，該圖像加載使用javascript調整大小以適合窗口，並且在調整瀏覽器窗口大小時，圖像會不斷調整大小。 但是，在javascript調整大小之前，圖像將以全尺寸加載。 因此，您將看到完整尺寸的圖像，然后它將跳轉到調整大小的版本。 我可以解決此問題，以便僅加載調整大小的圖像嗎？

我修改了一個使圖像的能見度：隱藏的小工具，然后在javascript調整大小后設置了能見度：visible，但這不是最理想的解決方案。

任何幫助都將是非常棒的，謝謝。

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% */
}

請參閱此處了解更多信息=> http://css-tricks.com/perfect-full-page-background-image/

Answer 2

不要使用javascript調整圖像大小。 使用CSS和HTML調整圖像大小。 向圖像添加一個div並調整div的高度和寬度，然后向圖像添加以下屬性。

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

您也可以點擊此鏈接，如何自動調整圖像大小以適合div容器

Javascript調整了背景圖片的大小，但是該圖片首先加載了原尺寸-可以解決嗎？

問題描述

2 個解決方案

解決方案1
1 已采納 2014-12-22 07:27:03

解決方案2
0 2014-12-22 07:26:41

Javascript調整了背景圖片的大小，但是該圖片首先加載了原尺寸-可以解決嗎？

問題描述

2 個解決方案

解決方案1 1 已采納 2014-12-22 07:27:03

解決方案2 0 2014-12-22 07:26:41

解決方案1
1 已采納 2014-12-22 07:27:03

解決方案2
0 2014-12-22 07:26:41