2017-07-19 43 views
1

我有一個網站,每頁有幾個小圖像(約24個)。當我訪問該頁面時,我可以看到頁面正在放大,文本顯示在關聯的圖像之前等等。這對我來說不是問題,因爲我知道網絡設計爲以這種方式工作,以便網站訪問者可以看到某些內容在頁面完全加載之前。問題是,今天,人們正在反對這個原則,以達到美麗,隱藏頁面的部分,直到它被完全加載是常見的,如果不是必需的。我無法與之抗衡(如果我願意的話)。當我向一些開發人員展示我的網站時,我可以看到他完全支持這種美觀,贊成「舊原則」。用幾個縮略圖圖像加載頁面的技巧(laravel 5.3)

我從來沒有真的試圖設計一個頁面,有一個「智能圖像加載」,所以我不知道從哪裏開始,這就是爲什麼我在這裏。如果您可以列出一些可用於在頁面中執行漸進式圖像加載的技術,插件等,將會很有幫助。

我的頁面正在通過簡單地返回所有圖像的視圖加載。我假設要實現智能圖像加載,我將不得不通過從控制器返回json來獲取圖像和關聯文本,這是否正確?如果是這樣,我將不得不對我的系統進行重大改變。我簡要地看到了一種技術,它將頁面上的所有圖像設置爲動畫gif圖像,然後當從服務器獲取數據(使用ajax/json)時,它將替換圖像的src屬性,這是一種很好的技術。再一次,最好的技術是什麼?

+0

你可能想用'html','css','javascript'來重新使用你的questoin。如果您使用的是Laravel和vuejs,則可以考慮使用vuejs的功能在加載後有條件地呈現圖像。 – haakym

+0

查看adam wathan的方法也可用於停止頁面在加載時放大圖片:https://youtu.be/ktj_GR1LvFw?t=588 – haakym

回答

0

您可以使用jQuery和CSS頁面完全加載之前顯示加載動畫

教程:http://smallenvelop.com/display-loading-icon-page-loads-completely/

工作例如:http://smallenvelop.com/demo/simple-pre-loader/

大公司的網站誰使用加載動畫:https://club.ubisoft.com/

只是一個警告:使用這種技術的網站看起來會比較慢,用戶甚至可能在頁面加載之前離開網站,我個人認爲首先顯示文本的默認行爲仍然是最好的。