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

php js lazyload

火爆浪子 2019-08-12 12:56:27 ‧ 1652 瀏覽

參考 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 }} |

直播中

1 個回答

dragonH

iT邦超人 5 級 ‧ 2019-08-12 13:23:00

最佳解答

就是 lazylaod

codepen

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

火爆浪子 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 怎麼辦?

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>