Javascript調整背景圖像的大小，但圖像首先加載全尺寸 - 任何修復？

我有一個圖像加載是調整大小，以適應窗口使用JavaScript，並且圖像不斷調整大小，當瀏覽器窗口調整大小。但是，在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"); 

});

來源

2014-12-22 trying_hal9000

可以使圖像寬度爲100 ％和高度自動。 – Abhijeet

謝謝，我會記住這個解決方案，但因爲我需要圖像來填充整個瀏覽器窗口，但我有圖像下的內容，我需要高度也是100％，當我這樣做時，一個窗口調整圖像大小是不是按比例壓扁 –

，如果你只是想調整圖像大小，使用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/

來源

2014-12-22 07:27:03 NoobEditor

這將調整窗口大小調整圖像大小？ –

@ trying_hal9000：是的......我個人更喜歡'100％100％'大小！ :) – NoobEditor

哇這工作很好，我發現我的js解決方案來自同一個網站，你能詳細說明爲什麼要使用JS解決方案嗎？只有添加舊的瀏覽器支持纔有幫助？再次感謝 –

不要調整與JavaScript的圖像。使用CSS和Html調整圖像大小。在圖像中添加一個div並調整div的高度和寬度，並將以下屬性添加到圖像。

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

您也可以點擊此鏈接How do I auto-resize an image to fit a div container

來源

2014-12-22 07:26:41

這會調整窗口大小的圖像大小？ –

意思是迴應？ –

如果用戶調整瀏覽器窗口大小，圖像的大小是否適合瀏覽器窗口 –

Javascript調整背景圖像的大小，但圖像首先加載全尺寸 - 任何修復？

回答

相關問題