iT邦幫忙

1

照片 lazyload ,外加上點擊進去後返回可以記憶進來前的位置?

  • 分享至 

  • xImage

https://www.zara.com/tw/zt/woman-dresses-l1066.html?v1=1281625

想請教一下黑科技名稱
(本身開發環境為 php + jquery)

當你進去這一頁時
你會發現根據捲軸看到這一頁內容不少
往下移動後根據「可視範圍」圖片才會開始下載,稍早前問過就是 lazyload 技術(我目前會做的是往下移動後直接倒入資訊)
但是它商品名稱都還在原地(等於是這一坨都事先載入商品資訊,格子都分好了,只差圖片不載入),只是可視範圍後才開始下載照片,這是哪一種 lazyload?

再來當你點進去商品後,再按瀏覽器的預設返回紐
他會記憶原本你剛剛近來的位置
臉書做法是直接「DIV彈起」 +「url 改變」來假裝換頁,但其實沒有
這個感覺不像是彈起?(有辦法做到類似效果嗎?)

因為網站資訊越來越多,勢必要解決這件事
參考了不少龍頭的做法
看到 zara 做法挺特別的
大神們有推薦的做法嗎?懇請指教,感恩

fillano iT邦超人 1 級 ‧ 2019-08-14 09:44:45 檢舉
fb的做法請google「history api」
火爆浪子 iT邦研究生 1 級 ‧ 2019-08-14 10:27:26 檢舉
這個做法我做過
只是 zara 是列表點進去後再回來,位置是記憶的
前提是列表他處理應該是 lazyload
這要怎麼跟瀏覽器"返回鍵"配合?
如果是「DIV彈起」 +「url 改變」,想必一定是關閉DIV,但假設使用者是按瀏覽器的返回呢?就會跳掉了
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
dragonH
iT邦超人 5 級 ‧ 2019-08-14 11:21:57
最佳解答

實在是不懂你的不懂 /images/emoticon/emoticon49.gif

lazyload 的最主要的功用

就是避免 user 下載不必要的資源

jquery lazyload官方文件提到

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

這也是 lazyload 最主要的功用

你想要彈出彈入、資訊留在原地

都不應該由 lazyload 負責的

阿這也是我上一篇回你的 /images/emoticon/emoticon10.gif

這是我用 zara 的東西來舉的例子

codepen

想要回到記憶的位置

就像 fillano大 說的

可以用 history api

而且 chrome 似乎就已經原生支援

參考

History.scrollRestoration 的 default 值 是 auto

我要發表回答

立即登入回答