台灣最大程式設計社群網站
線上人數
1557
 
會員總數:243174
討論主題:187988
歡迎您免費加入會員
討論區列表 >> Java Script/ Node.js >> 網頁可見區域的圖片,顯示/隱藏
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
網頁可見區域的圖片,顯示/隱藏
價值 : 50 QP  點閱數:303 回應數:4

樓主

建建
初學者
289 225
1976 443
發送站內信

請教各位學長:
手機網頁,如果出現很多圖片時,手機往上滑,往卡滑,有時會卡卡,如果是文字就不會
後來我仔細觀查別人的網站,發現一個情況
網頁可見區域,停了約0.5秒圖片才顯示,離開可見區域,圖片馬上隱藏
不知那邊有直接有範例,可以下載修改的,謝謝!

搜尋相關Tags的文章: [ 網頁可見區域的圖片,顯示/隱藏 ] ,
本篇文章發表於2018-01-19 19:47
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
作者回應

建建
檢舉此回應
在手機設計程式中web元件會有這樣的情況
本篇文章回覆於2018-01-19 22:46
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
一般來說,這得看你的用處來決定要設計的方式。
你在#1說的方式,是屬於一種後觸發式的載入方式。


一般來說,當一個網頁的圖片很多時。瀏覽器大多數都會採用後載入式的處理方式。
在圖片還未全數載入完全的情況下。
會造成頁面高度的未定向,而造成在下滑時,有時會因為正在載入圖片時又錯位情況(也就是你說的卡卡的現像)

一般來說,想要解決這樣的情況。有其下很多種方式

1.等待載入完成後再顯示頁面:(完載式處理)
一般來說這樣的方式很少人會選,因為會有機會產生很久的白頁現像。
但有些情況還是會有人這樣做,但會搭配一個轉頁的宣告處理。至少不會看到白頁的情況。

2.預載式處理:
算是第一種的變型方式。基本頁面還是會先載入。但其圖片的寬高先預些定義好。
之後再給他慢慢的載入。
一般來說,如果有些定義好寬高的情況。跑位的現像就會比較不存在。
這招比較常會用來有固定寬或高的頁面。

3.後置載入處理:
也就是先載入幾張圖。等到底再用ajax的方式再載入幾張。

其實還有很多的變動的設計方式。只要能解決圖片載入的高度變幻問題就行。
本篇文章回覆於2018-01-20 14:48
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
作者回應

建建
檢舉此回應
感謝版主的回應
我是使用app inventor的程式,裡面的webview元件,會有這情況
如果使用一般手機流覽器,去流覽網頁,狀況都是可皆受的,也許是本身元件有問題,即使是圖片都載完了,手機往上滑,有時捲軸還會往下,往下滑,又往上捲,因此才想用這個方式
因為有看到有人的手機網頁是這樣設計的,可見區域顯示,離開可見區域,圖片顯示空白,整個頁面非常平順
本篇文章回覆於2018-01-20 23:30
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
這有時是本身webview的問題了。

我之前是有用一招。不直接用img元件。採用div元件搭配背景圖的方式。
會讓webview比較不容易受到img的特性影響。
本篇文章回覆於2018-01-22 10:18
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.