寫在前
大家好,我又來霍霍大家了,切圖仔報導。記一次面試被問到京東、淘寶是如果做前端效能優化的,在這我也不怕你們鄙視我了,我只是說了一些超低階的就是 做雪碧圖啊、壓縮圖片、壓縮js、css ,引用外部檔案。css 放head js 放/body ,減少DOM 操作啊之類的等等。
嗯,沒錯,我只看到了面試官那鄙視的眼神。。。。
廢話不多說了,回來後查了點資料 然後有懶載入 和預載入,下面簡要介紹一下:
1.what ?
懶載入 俗稱延遲載入、是指在一些長頁面中延遲載入圖片,當img出現在使用者可視區域後才載入,是一種良好的頁面效能優化方式,適用於 一些大型電商網站比如上面說的那兩個。
2.why ?
- 減少不必要的載入 第一眼不出現在使用者面前的圖片可以不讓其載入,減少http請求次數
- 良好的使用者體驗 當你上京東購物,n張圖片都需要載入,網速快的不說啥了,網速慢的等你載入完黃花菜都涼了
3.principle
第一步、先把頁面圖片的src置空,不讓其傳送請求,把真是圖片地址放置在 自定義屬性中data-url="xxx.jpg";
第二步、當頁面開始滾動需要監聽scroll事件,在事件回撥函式中,我們判斷一下圖片是否進入了可視區域,如果圖片在可視區域,那麼我們就把自定義的屬性(data-url)賦值給 圖片的 src屬性
懶載入的東西說完了,這裡不得不提一嘴節流,因為面試官可能會問你一嘴 那懶載入頻繁觸發 scroll 會不會加重瀏覽器的負擔,造成頁面的崩潰啊 ?
請你用節流堵住他的嘴。
4.throttle
其實節流就是 節流嘛! 節約流量(開玩笑哈),我只知道是在你定義的時間間隔之外才呼叫函式,這樣就可以大大的限制使用者操作頁面頻繁觸發的scroll 了,大大的提高了瀏覽器的效能,不過你放心,微妙的時間,使用者是不會發覺的。
5.上程式碼了
複製程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.min.js"></script>
<script>
// 先呼叫,保證可視區域的圖片顯示
lazy();
function lazy() {
var imgS = Array.from($('img')); // 獲取頁面 img 元素陣列
// console.log(imgS)
var imgL = $('img').length; // 獲取頁面 img 元素數量
// console.log(imgL)
var seeHeight = $(window).height(); // 獲取頁面 可視區域高度
// console.log(seeHeight)
var scrollT = $(document).scrollTop(); // 獲取頁面滾出 高度
// console.log(scrollT)
// 開始遍歷 這個陣列
for (var i = 0; i < imgL; i++) {
// console.log($(imgS[i]).offset().top + " /")
// console.log(seeHeight + scrollT)
// 如果當前元素 出現在可視區域後
if ($(imgS[i]).offset().top < seeHeight + scrollT) {
//如果 當前自定義的 url 不為空
if ($(imgS[i]).attr("data-url") !== "undefined") {
// 把自定義屬性地址 賦值給 img.src
$(imgS[i]).attr("src", $(imgS[i]).attr("data-url"))
}
}
}
}
// 使用者頻繁操作 scroll 不免造成頁面效能不佳 此刻當然需要配合 節流 使頁面效能更加優化
function throttle(fn, delay) { // 定義的引數函式和延遲時間
var begin = new Date();
return function () {
var curtimer = new Date();
var contxt = this,
args = arguments;
if (curtimer - begin > delay) { // 時間間隔 > 定義時間 才執行
fn.apply(contxt, args);
begin = curtimer;
}
}
}
$(document).scroll(throttle(lazy, 100)); // 滾動時間 在100ms 內只執行一次
</script>
</body>
</html>
接受你們的鄙視。