加載背景圖像，縮放到窗口大小，然後淡入

我最近啓動了一個項目，我想讓背景圖像縮放到窗口的大小。我能使其與下面的代碼工作：加載背景圖像，縮放到窗口大小，然後淡入

<script> 
$(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"); 

}); 

</script> 
</head> 
<body> 
    <img src="images/ij_background.jpg" id="bg" alt=""> 
</body> 
</html>

的問題是，背景圖像將加載完整大小的圖片，然後擴展到窗口的大小，這是一個有點難看。我希望圖像加載，縮放，然後用淡入淡出來顯示。因爲我對jQuery有點新鮮感，所以我變得有點卡住了。這裏是我有so far。

來源

2011-11-10 BobSacamano

您可以加載圖像隱藏，調整大小，然後淡入。此方法要求在客戶端上啓用JavaScript（約98％的人啓用了該功能，但其他2％的noscript回退可能會是值得的）。它看起來像這樣（live copy）：

// jQuery 
jQuery(function($) { 
    var theWindow  = $(window), 
     aspectRatio, 
     // Create img element in jQuery wrapper 
     $bg    = $("<img>"), 
     // Get the raw element 
     bg    = $bg[0]; 

    // Hide the element, hook its load event, and set its `id` and `src` 
    // Important: Hook the load event *before* setting `src` 
    $bg.hide().load(bgLoad); 
    bg.id = "bg"; 
    bg.src = "http://www.injurytimeshort.lanewaypictures.com/images/ij_background.jpg"; 

    // Append it to the body 
    $bg.appendTo(document.body); 

    // Resize on window resize 
    theWindow.resize(resizeBg); 

    function bgLoad() { 
    // Now that the image is loaded, get its aspect ratio 
    aspectRatio = $bg.width()/$bg.height(); 

    // Resize it 
    resizeBg(); 

    // And fade it in 
    $bg.fadeIn(); 
    } 

    function resizeBg() { 

     if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
      $bg 
       .removeClass() 
       .addClass('bgheight'); 
     } else { 
      $bg 
       .removeClass() 
       .addClass('bgwidth'); 
     } 

    } 
});

請注意，我們不再等待整體window#load事件，火災，我們只關心的是，DOM已準備就緒，這個特定的圖像加載完成。

來源

2011-11-10 06:52:25

嘗試縮放帶有CSS屬性max-width: 100%;的圖像。這個屬性很好，它不會放大小圖像;它只會縮小大圖像。圖像將立即以正確的大小加載。爲什麼要打擾淡入淡出？

來源

2011-11-10 06:33:04

您的案例的完整CSS代碼將是'img＃bg {max-width：100％; }' –

我認爲如果圖像在加載後會淡入，它會更好看。 [例如。]（http://www.thepra.com.au/） – BobSacamano

哦，那看起來不錯！ –

加載背景圖像，縮放到窗口大小，然後淡入

回答

相關問題