[英]Preloader does not preload and loads the page a second time
我找到了這個不錯的jQuery 預加載器/進度條 ,但我無法讓它按預期工作。 問題是它首先加載我的頁面,在我的整個頁面加載后,0%-100%條顯示很快,之后它再次重新加載我的頁面。 因此,它不會在頁面加載之前顯示進度條,它也會再次加載頁面。
這是我的實現代碼:
<head>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").queryLoader2();
});
</script>
</head>
<body>
My content...No other reference in here for the Jquery preloader
</body>
在此先感謝您的幫助。
我在這里可能非常非常錯 ,但在我看來:
我創建了一個測試小提琴,並發現了以下內容:
completeImageLoading();
永遠不會被調用,因為它只綁定到圖像元素。 當沒有圖像時 - >沒有綁定 - >沒有觸發 - >什么都沒有完成 - >你保持覆蓋0%,如不運行的小提琴所示(當頁面未運行時,jsfiddle沒有看到相對圖像) 。 <img src="http://example.com/image.jpg">
- 那么它將無效,因為插件無法識別它們。 實際上它使用$.ajax
來加載圖像,這顯然會在嘗試訪問另一個域時產生錯誤。 建議:
關於預加載器的編輯
關於預加載器...如果顯示進度不是強制性的,那么你可以使用window.onload
技巧。 在DOM ready $(...)
您創建一個不透明的頁面覆蓋,其中包含“Please wait ...”消息和一些動畫,如果您喜歡它。 然后等待window.onload事件 “在文檔加載過程結束時觸發...當文檔中的所有對象都在DOM中,並且所有圖像和子幀都已完成加載。” 當window.onload
觸發時,您只需刪除疊加層即可 - 頁面已准備就緒!
編輯2關於預加載器
實際上,你甚至不需要$(...)
......我到底在想什么? 只需在你的html中創建你的疊加層(一個帶有唯一id的簡單div),將它設置為樣式,使其填充屏幕並為其提供z-index:1337
CSS屬性,使其覆蓋整個頁面。 然后,在window.onload上:
window.onload = function () {
// Grab a reference to your overlay element:
var overlay = document.getElementById('myOverlay');
// Check if the overlay really exists
// and if it is really appended to the DOM,
// because if not - removeChild throws an error
if (overlay && overlay.parentNode && overlay.parentNode.nodeType === 1) {
// Remove overlay from DOM:
overlay.parentNode.removeChild(overlay);
// Now trash it to free some resources:
overlay = null;
}
};
當然,它不是真正的預加載器,而只是模仿。
這是一個你可以玩的小提琴 。
PS我個人並不欣賞預加載器,但那只是我......
試試這個(刪除document.ready事件,然后簡單地調用它): -
<script type="text/javascript">
$("body").queryLoader2();
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.