簡體   English   中英

Preloader不會預加載並第二次加載頁面

[英]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>

在此先感謝您的幫助。

我在這里可能非常非常錯 ,但在我看來:

  1. 該插件存在缺陷。
  2. 您的頁面中存在導致重定向的問題。

我創建了一個測試小提琴,並發現了以下內容:

  1. 如果頁面上沒有圖像 ,那么插件的私有函數completeImageLoading(); 永遠不會被調用,因為它只綁定到圖像元素。 當沒有圖像時 - >沒有綁定 - >沒有觸發 - >什么都沒有完成 - >你保持覆蓋0%,如不運行的小提琴所示(當頁面未運行時,jsfiddle沒有看到相對圖像) 。
  2. 該插件不考慮遠程圖像。 因此,如果您將它們聲明為<img src="http://example.com/image.jpg"> - 那么它將無效,因為插件無法識別它們。 實際上它使用$.ajax來加載圖像,這顯然會在嘗試訪問另一個域時產生錯誤。
  3. 該插件不會重新加載頁面(至少在谷歌瀏覽器中)...在小提琴中檢查您的控制台輸出。 每次單擊“運行”時,它會顯示一次消息。

建議:

  1. 確保您提供至少一個相對背景圖像 (雖然我沒有測試背景......)以使插件正常工作。
  2. 向我們展示更多代碼。 小提示演示該插件不會導致頁面重新加載 (至少在Chrome中...你使用的是其他瀏覽器嗎?)。 它必須是你做的東西干擾這里。
  3. 為插件指定一些選項 (當沒有插件時表現得很奇怪)。

關於預加載器的編輯

關於預加載器...如果顯示進度不是強制性的,那么你可以使用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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM