懶載入初步了解

2021-09-18 03:43:23 字數 1094 閱讀 8407

1.頁面中的img元素不直接設定src屬性,而是儲存在乙個屬性裡,比如data-src。到需要它載入的時候才通過js設定src路徑。

2.獲取可視區域大小,元素的位置,滾動條滾動距離。

var box=document.

getelementbyid

('box');

// 獲取元素

alert

(box.

getboundingclientrect()

.top)

;// 元素上邊距離頁面上邊的距離

alert

(box.

getboundingclientrect()

.right)

;// 元素右邊距離頁面右邊的距離

alert

(box.

getboundingclientrect()

.bottom)

;// 元素下邊距離頁面下邊的距離

alert

(box.

getboundingclientrect()

.left)

;// 元素左邊距離頁面左邊的距離

jquery:

$

(obj)

.position()

.top;

// 元素上邊距離頁面上邊的距離

$(obj)

.position()

.left;

// 元素右邊距離頁面左邊的距離

$(obj)

.position()

.right;

// 元素右邊距離頁面右邊的距離

$(obj)

.position()

.bottom;

// 元素下邊距離頁面下邊的距離

3.根據可視區域大小,元素的位置,滾動條滾動距離判斷元素是否在可視區域

1.引入檔案

2.定義結構

3.啟用

$("img.lazy").lazyload();
其他屬性:

mysql懶載入 mybatis懶載入

1.概念 懶載入就是按需載入,我們需要什麼的時候再去進行什麼操作。而且先從單錶查詢,需要時再從關聯表去關聯查詢,能很大提高資料庫效能,因為查詢單錶要比關聯查詢多張表速度要快。在mybatis中,resultmap可以實現高階對映 使用association collection實現一對一及一對多對映...

路由懶載入與元件懶載入

一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import 1 不用懶載入,vue中路由 如下 impor...

路由懶載入和元件懶載入

為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 1 未用懶載入,vue中路由 如下 import vue from vue i...