如何加載一個大尺寸的圖像，以便以後使用jQuery的背景圖像懸停效果？

我試圖淡入淡出使用jQuery和CSS過渡兩個背景圖像，它的工作原理，但圖像是高分辨率和相當大，即使我壓縮他們儘可能爲web使用率，但保持分辨率和細節。這對於速度適中的慢速網絡來說效果並不理想，因爲我第一次將鼠標懸停在觸發元素上時，出現了一個我不太喜歡的白屏幕lapsus。如何加載一個大尺寸的圖像，以便以後使用jQuery的背景圖像懸停效果？

我知道我可以做到這一點，通過添加一個隱藏的div與該背景圖像的網址，將設置爲顯示：無;並觸發不透明度改變，但我想知道是否有更好的方法來做到這一點。比如在懸停功能發生之前加載圖像，以便文檔準備就緒。也許它可能會發生，但更不可能。

當我將鼠標懸停在觸發器元素上時，CSS轉換效果很好，但在鼠標移出圖像時不會消失，我不確定是否應該使用jQuery或直接使用CSS來解決問題。無論如何，問題是在懸停功能啓動之前加載圖像。我會嘗試AJAX load（）方法...

#Introduction { 
    background: url(url.jpg) no-repeat fixed center; 
    background-size: cover; 
    transition: background 1.5s linear; 
} 

$(document).ready(function() { 
$('#LogoContainer').hover(function() { 
    $('#LogoMainPiece').fadeTo('slow', 0.3); 
    $('#LogoOtherPiece').fadeTo('slow', 1); 
    $('#Introduction').css('background-image', 'url(hoverurl.jpg)'); 
}, function() { 
    $('#LogoMainPiece').fadeTo('slow', 1); 
    $('#LogoOtherPiece').fadeTo('slow', 0.3); 
    $('#Introduction').css('background-image', 'url(url.jpg)'); 
}); 
});

來源

2016-05-14 Adriana Cota

你谷歌預載圖片「？ – RST

你可以使用CSS和pseudo和opacity來模仿淡入淡出效果，background-image沒有不透明選項。例如：http://codepen.io/gcyrillus/pen/DJdja –

我不需要加載器..我試圖實現一個部分背景懸停效果，其中觸發器是標誌容器。至於CSS效果，我喜歡它，但我真的更喜歡使用jQuery，除非我沒有選項，我試圖找出。到目前爲止，我設法用jQuery淡化背景圖像，沒有任何問題。問題是，我第一次將它懸停在第一次懸停的背景上。而且我認爲CSS轉換不會起反作用。 –

#Introduction { 
    background: url(bg.jpg) no-repeat fixed center; 
    background-size: cover; 
} 
#IntroductionHoverBackground { 
    width: 100%; 
    min-height: 730px; 
    background: url(hoverbg.jpg) no-repeat fixed center; 
    background-size: cover; 
    display: none; 
} 

<script type='text/javascript'> 
//<![CDATA[ 
$(document).ready(function() { 
    $('#LogoContainer').hover(function() { 
     $('#LogoMainPart').fadeTo('slow', 0.37); 
     $('#LogoOtherPart').fadeTo('slow', 1); 
     $('#IntroductionHoverBackground').fadeTo('slow', 1); 
    }, function() { 
     $('#LogoMainPart').fadeTo('slow', 1); 
     $('#LogoOtherPart').fadeTo('slow', 0.37); 
     $('#IntroductionHoverBackground').fadeTo('slow', 0); 
    }); 
}); 
//]]> 
</script>

來源

2016-05-14 23:53:44

如何加載一個大尺寸的圖像，以便以後使用jQuery的背景圖像懸停效果？

回答

相關問題