[ 網頁教學 ] Loading 製作載入中畫面 (8/9更新:Safari 載入問題)

標籤: , , ,

 

此篇文章要教大家如何製作 Loading 畫面,在瀏覽網站的時候有時候會看到有些網站有 “過場畫面” ,當整個網頁載好時才會讓使用者看到完整的畫面,這樣有什麼好處呢?可以讓網頁更有質感、看起來更猛的樣子,當然不只這些!有了這個過場畫面可以確保網站是在完全載入好的情況下呈現給使用者看,這樣就不用擔心素材載入速度不一使用者看到的東西會不完整影響使用者體驗囉!

 

Step1:製作一個 Loading 畫面

這個可以自由發揮,如果不知道可以做什麼樣子的效果可以參考以下兩個連結。

這裡提供一個簡單的範例,請安心服用。

範例下載

Codepen Loading

W3C Loading

 

Step2:寫一個判斷目前頁面是否載入完成的判斷式

判斷目前頁面是否載入成功有兩個方式

//方法1
function myload() {
  //做什麼事
}
window.onload = myload;
//方法2
window.onload = function() { 
  //做什麼事
};

 

Step3:寫一段語法,當頁面載好時要做什麼事

我這邊是使用 JQuery 的 fadeOut 來做,將一開始顯示的 Loading 畫面隱藏。

概念:Loading 畫面一開始就存在,當頁面載入完成的時候消失。

$(".load").fadeOut(3000);

fadeOut ( 3000 ) ,裡面填的 3000 是秒數(單位是毫秒)的意思,因為網頁沒什麼東西所以讓 Loading 時間比較久,但是如果你的網站是本身就需要高載入量的就不宜設定這麼久喔,根據研究統計,網站如果超過3秒使用者就會覺得載入太久了。

 

★結合

    //方法1
    function myload() {
        $(".load").fadeOut(3000);
    }
  window.onload = myload;

    //方法2
    window.onload = function() { 
        $(".load").fadeOut(3000);
    };

兩個方法則一即可,因為兩個方法的效果是一樣的。

 

按照以上步驟就能夠製作出屬於自己的載入畫面了,Loading 要長什麼樣子可以依照網站風格去設計。

那麼今天的教學就到此結束,感謝閱讀!

 

★8/9補充

使用步驟 2 的判斷式可能在 iOS 或是 MAC 產品遇到畫面持續載入(不斷跑 Loading 中畫面)的問題,更正確來說是在 Safari 會遇到這個問題,原因是 The browser independent code is: window.onload();

那我們該怎麼解決這個問題?

試試這篇文章 window-load-chrome-safari-problem

JQ本身就有 Document ready 的 Function 如果是想要做 PageLoading 的效果,直接將語法貼在最下方。

如圖所示,這樣或許能解決你的問題,有任何問題歡迎提出討論。

 



相關文章

Slider and Carousel 幻燈片( 新增 Swiper API ) 今天要跟大家介紹幻燈片的小工具,幻燈片可以說是讓網頁瞬間升級最方便的功能之一了!如果能夠自己寫當然是最好的,但是如果沒有什麼基礎又想做出幻燈片的功能?推薦幾個開放原始碼的網站給你們參考~就能擁有厲害的...
One Page Scroll 判斷目前所在區塊(4/19更新說明)...   什麼是 One Page Scroll 呢? 概念類似垂直的幻燈片,只是操控的方式是以滑動(觸控螢幕,ex:手機)/ 滾輪(電腦)來進行,一樣可以點這個點翻動到此頁,也可以用...
刪除 wordpress 自動產生的 p 與 br 如何刪除 wordpress 自動產生的 p 與 br呢?如果有自己架站的話就知道當我們想要用文字編輯器來撰寫自己的版面的時候總是會莫名其妙生出 p 或是 br 導致排版亂掉。當遇到這總情況的時候總是...
從零開始的 JQuery 開場白 #0   JQuery 在網頁的應用上有很好表現,怎麼說呢?JQuery 像是一塊一塊地積木,擁有各式各樣的形狀(如果沒有我們想要的形狀哩?)讓我們可以自己組合成自己想要的樣子。也就是說 J...