jquery顯示圖片之前.load（）

我知道這已經被問了很多，但我需要儘可能簡單地顯示加載內容之前加載的內容，確切地說Facebook的註冊表格和許多其他網站。jquery顯示圖片之前.load（）

$("#signUpPanel").click(function(){ 
     $("#headInner").html("<img class='spinner' src='imgs/spinner.gif'>"); 
     $("#headInner").load("signUp.php"); 
});

這是我到目前爲止所顯示的，但它幾乎不可能看到它。我正在考慮使用delay（）函數或類似的東西，請提前感謝，如果可以的話儘可能簡單。

來源

2012-05-10 Disorganizing

顯示正在加載內容的圖片似乎是一件好事，但有意減慢加載內容以顯示圖片的速度似乎相當具有反作用。如果您有實際的延遲，圖片將顯示，但如果您的網頁在0.0001秒內加載，您應該很高興，而不是嘗試使其看起來像您的網頁加載時間較長。 – Nope

$("#signUpPanel").click(function(){ 
    $("#headInner").html("<img class='spinner' src='imgs/spinner.gif'>"); 
    setTimeout(function(){$("#headInner").load("signUp.php");},1000); 
});

來源

2012-05-10 22:42:26 marteljn

感謝那正是我想要的，我真的很感激它 – Disorganizing

如果這解決了你的問題，那麼接受其中一個答案:) – marteljn

你應該預先加載點擊觸發
爲什麼使用延遲在什麼地方的形象，沒有人希望等待更多的時間只是看到加載圖像，如果內容加載速度不夠快沒看到加載你應該感到高興。

來源

2012-05-10 22:44:01 Musa

正確方法：

$("#signUpPanel").click(function(){ 
    // in this way after image loaded, page will be load ... 
    $('<img class='spinner' src='imgs/spinner.gif' />').load(function(){ 
     $("#headInner").html($(this)); 
     $("#headInner").load("signUp.php"); 
    }); 

});

來源

2012-05-10 23:19:26

的問題是要添加到DOM。你需要這樣做。

$('#headerInner').addClass('loadingClass'); 

.loadingClass { background-image: url('imgs/spinner.gif') } 

$('#headerInner').removeClass('loadingClass');

來源

2012-05-10 23:20:00 Elliott

這是最簡單的直接代碼。有了它作爲背景圖像，你可以讓它出現在你想要的地方。 – Elliott

var img = $('<img/>')[0].src = 'imgs/spinner.gif'; //preload 
    img.className = 'spinner'; //add class 

$("#signUpPanel").on('click', function(){ 
    $("#headInner").html(img).load("signUp.php"); //load will remove the image 
});

如果這是不可能的，甚至看到它，負載足夠快，它通常是一個壞主意了微調。

拖延功能只是爲了顯示你的酷微調是與提高你的網站相反。

來源

2012-05-10 23:26:08 adeneo

jquery顯示圖片之前.load（）

回答

相關問題