僅在完全加載后加載背景圖像？
[英]Only load the background-image when it has been fully loaded?
問題描述
好吧，標題幾乎描述了我的問題：
如何在完全加載后動態加載背景圖像？ 有時，我必須使用太大的背景，以至於瀏覽器可能需要一段時間才能下載它。 我寧願“在后台加載它”並讓它在完全加載后淡入。
我認為 jQuery 最好使用，但如果 JavaScript 已被禁用，我也希望我的背景出現。 如果這真的不可能，那就這樣吧，但我認為是嗎？
最好的問候， 阿爾特
…………
編輯：
非常感謝，伙計們。 多年來我一直被這個問題困擾，只是想不出一個簡單易行的方法。
我將 Jeffrey 的 Javascript 解決方案轉換為一個 jQuery 解決方案，只是因為 jQuery 的內置淡入淡出看起來很棒。
我會在這里發布以防其他人遇到同樣的問題：
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#img').css('opacity','0').load(function() {
$(this).animate({
opacity: 1
}, 500);
});
});
</script>
<img src='yourimage.jpg' id='img'/>
6 個解決方案
解決方案1
7 已采納 2012-04-04 15:03:21
如果圖像包含在img元素中：
<img src="bg.jpg" id="img" onload="this.style.opacity='1'">
<script>
document.getElementById("img").style.opacity="0";
</script>
如果 JavaScript 被禁用，那應該會正常加載圖像，但假設它已啟用，則僅在加載后顯示它。
需要注意的一件事（我忽略了）：如果display屬性為none ，某些瀏覽器甚至不會嘗試加載圖像。 這就是此方法使用opacity屬性的原因。
解決方案2
3 2012-04-04 15:02:38
當 JS 被禁用時，你不能這樣做。 但是，您可以做的是在 CSS 中設置背景圖像，然后使用以下腳本（假設該元素的 ID myelem ）。
(function() {
var elm = document.getElementById('myelem'),
url = 'background image URL here';
elm.style.backgroundImage = "none";
var tmp = new Image();
tmp.onload = function() {
elm.style.backgroundImage = "url('"+url+"')";
// or insert some other special effect code here.
};
tmp.src = url;
})();
編輯：盡管如此，請確保您的背景圖像是最佳的。 如果它們是 PNG，請嘗試使用盡可能小的顏色表對它們進行索引，或者如果沒有透明度，請確保刪除 alpha 通道。 如果它們是 JPEG，請嘗試調整壓縮率。
解決方案3
1 2012-04-04 15:02:21
查看此頁面上的示例： http://www.w3schools.com/jsref/event_img_onload.asp
使用“image.onload”將僅在圖像准備就緒時啟動您的代碼
解決方案4
1 2012-04-04 15:03:34
沒有 javascript 就沒有事件，因此您將無法知道圖像是否已加載，至少在第一次渲染時是這樣。
您還可以使用 css 預加載（將圖像作為背景放在隱藏的 div 中），但這在第一次刷新時效果更好，而不是在加載時。
解決方案5
1 2012-04-04 15:04:57
您可以為圖像設置一個變量，並在加載時將其設置為主體背景：
var my_bg = new Image();
my_bg.src = "url(mybackground.png)";
document.style.backgroundImage = my_bg;
解決方案6
1 2012-04-04 15:08:59
您正在尋找的是圖像 onLoad 方法。 如果您使用 display:none 設置圖像，它將不可見。 要避免可能缺少 javascript，請執行以下操作：
<body style="background-image:url(image.png);">
<img src="image.png" style="display:none" onLoad="changeBackground();" />
</body>
<script>
document.body.style.backgroundImage = "";
function changeBackground(){
document.body.style.backgroundImage = "url(image.png)";
}
</script>
這樣，如果 javascript 未啟用，bg 將正常加載。 如果是，它會顯示在最后
如何在JavaScript類構造函數中動態加載Jquery，並在jquery完全加載后繼續執行
[英]How to dynamic load Jquery inside a JavaScript Class constructor and proceed the execution only after jquery has been fully loaded
僅在尚未加載 js 腳本時才加載它，然后僅加載一次
[英]Load js script only when it has not been loaded already and then only once
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.