當瀏覽器刷新或點擊任何鏈接時，底部內容跳轉

-2

我正在開發一個具有全屏幕背景圖像的Website（PHP/Wordpress）。我總是遇到背景圖片的問題，我在給高度計算用戶查看的屏幕/窗口的高度，我的Jquery Code。加載它需要一些時間，並且您可以在瀏覽器中單擊刷新或單擊任何鏈接時看到底部div。我可以使用任何頁面轉換爲這些不spinners或加載欄的東西，我可以淡入或向上或向下滑動頁面加載或刷新時，或者有什麼我應該做的。如何從用戶隱藏所有這些加載問題？當瀏覽器刷新或點擊任何鏈接時，底部內容跳轉

來源

2016-03-07 melonye

爲您的項目添加一個頁面，以便我們可以看到您想要的內容 –

鏈接中有整個網站，因此當您說添加頁面時，您的意思是什麼？ – melonye

只是一個建議，但你有沒有嘗試將全屏背景容器的高度設置爲視口的100％？像div {height：100vh; } – TripsLeft

在你的WP主題標題把啓動<div>包裝：

<div class="pageLoad">

而且你可以結束它在你的WP主題頁腳

</div>

您可以使用Font Awesome微調爲您的裝載機。在頁面加載股利後的WP主題標題添加微調

<div class="buffer"> 
    <i class="fa fa-spinner fa-pulse"></i> 
</div>

創建另一個<div>微調後，再次它會在你的WP主題頭開始，在你的WP頁腳結束（或任何你想要加載）

<div class="body"> 

<!-- put rest of page content, photos, etc here --> 

</div>

那麼對於jQuery的，你會指望所有的圖像，一旦他們完成加載，它會隱藏微調和展示的內容：

var imgs = $(".pageLoad img") 
var count = imgs.length; 

$('.body').hide(); 

imgs.load(function() { 
    count--; 
    if (!count) { 
     $('.body').show(); 
     $('.buffer').hide(); 
    } 
}).filter(function() { 
    return this.complete; 
}).load();

jsfiddle demo

您將不得不用背景圖像測試它，但這應該足以讓您開始使用。

來源

2016-03-07 22:14:03 PlatinumJay

非常感謝您對像我這樣一個沒有經驗的人的詳細解釋。我不想使用微調器或加載圖像，但你給了我一個如何使用淡入淡出或類似轉換的想法，以便隱藏問題。我會盡快讓你知道。 – melonye

聽起來不錯 - 祝你好運。 – PlatinumJay

當瀏覽器刷新或點擊任何鏈接時，底部內容跳轉

回答

相關問題