iT邦幫忙

1

根據「當前可視範圍」讀取圖片?

  • 分享至 

  • xImage

參考 zara
https://www.zara.com/tw/zt/woman-basics-l1050.html?v1=1282128

當進去的時候他只有下載「當前可視範圍」的圖片
直到往下後他才會繼續下載圖片
就是不會等到全部 onload 才出現
我知道有個方式是 lazyload 是像臉書一樣往下移動才會丟資料進來
但是 zara 是圖片已經有框框在那邊等了,往下移動「當前可視範圍」時才繼續下載照片
這是什麼高科技技術名稱?
或是有什麼方式可以做到類似效果?

froce iT邦大師 1 級 ‧ 2019-08-12 15:43:35 檢舉
人家zara原始碼根本沒做啥混淆,麻煩自己打開來看好嗎?
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

3
dragonH
iT邦超人 5 級 ‧ 2019-08-12 13:23:00
最佳解答

就是 lazylaod

codepen

看更多先前的回應...收起先前的回應...
火爆浪子 iT邦研究生 1 級 ‧ 2019-08-12 13:24:00 檢舉

哇,pug 這也太強了,這樣就可以做到⋯⋯啊 jquery 怎麼辦?

火爆浪子 iT邦研究生 1 級 ‧ 2019-08-12 13:24:37 檢舉

也就是說跟臉書道理一樣,往下才繼續 load 就行了

dragonH iT邦超人 5 級 ‧ 2019-08-12 13:27:43 檢舉

阿這就是 lazyload 主要的功能呀

什麼東西 jquery 怎麼辦? /images/emoticon/emoticon19.gif

pug 只是 render view 而已

jquery 該怎麼辦就怎麼辦

小魚 iT邦大師 1 級 ‧ 2019-08-12 13:47:03 檢舉

你那是什麼語法?
為什麼有 div.row 這種語法?

dragonH iT邦超人 5 級 ‧ 2019-08-12 13:51:13 檢舉

pug

前端 template

以前好像叫 jade 吧

因為 codepen 沒有 code intellisense 實在很麻煩

div.row

等於

<div class = "row"></div>

-----------------------------------
div.row
    div.row
        div.row
等於

<div class = "row">
    <div class = "row">
        <div class = "row"></div>
    </div>
</div>
火爆浪子 iT邦研究生 1 級 ‧ 2019-08-14 09:36:08 檢舉

我發問了一個zara問題

我要發表回答

立即登入回答