懶載入的效果

2022-07-21 13:54:22 字數 3552 閱讀 7924

doctype html


>


<


html


>


<


head


>


<


title


>懶載入


title


>


<


meta 


charset


="utf-8"


/>


<


meta 


name


="viewport"


content


="width=device-width, initial-scale=1"


/>


<


style


>


body


ul,li


#main .list-wrap


#main .list-item


#main .pic-wrap


#main .cont-wrap


style


>


head


>


<


body


>


<


div 


id="main"


>


<


ul class


="list-wrap"


>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址" />


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址"


/>


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址"


/>


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址"


/>


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址"


/>


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址"


/>


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址"


/>


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址"


/>


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址"


/>


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址"


/>


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


<


li class


>


<


img 


class


="pic-wrap"


data-src


="你的位址"


/>


<


div 


class


="cont-wrap"


>


這個效果有點好 


div>


li>


ul>


div>


<


script 


src="bundle.js"


>


script


>


<


script


>


(function


() , 


500function


()  }); 


//觸發校驗


script


>


body


>


html


>



bundle.js

1
js原始碼

效果圖就不上了，就是懶載入的效果

mysql懶載入 mybatis懶載入

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

spring的懶載入和非懶載入

因為這樣在配置中的任何錯誤就會即刻被發現 否則的話可能要花幾個小時甚至幾天 有時候這種預設處理可能並不是 在xml配置檔案中，延遲初始化將通過元素中的 lazy init 屬性來進行控制。例如 html view plain copy beanid lazy class com.foo.expens...

路由懶載入與元件懶載入

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