踩坑2/10000, 優化頁面訪問速度之懶載入。
現在的網際網路越來越發的，與使用者的互動也越發的重要起來，在我門前端人員的開發過程中，相信都遇到過頁面載入速度太慢的問題，這個問題出現的原因比較多，什麼載入資源比較多，頻寬比較低之類的，在這裡就不做贅述，就來講講今天的主角-----懶載入。
什麼是懶載入呢？顧名思義就是一種加快頁面載入速度，從而優化使用者體驗，技術並不複雜，但寫之前要理解幾個高度：
1,offsettop: 元素距離頁面頂端的距離。
2,scrolltop: 頁面滾動的距離。
3.clientheight: 頁面可視區域的高度。
知道了這些我們來寫懶載入就容易了許多，只要知道頁面滾動的距離+頁面可視的距離如果》=了元素距離頁面頂端的距離，那麼就說明元素出現在了頁面的可視區域，知道了這個，那麼我們在scrolltop + clientheight < offsettop的時候載入就行了，
比如div1l離頂部1500px,頁面可視區域1000px, 我們只有滑動的距離小於500，那麼這個div就不會出現在頁面上，反之就出現在頁面上，
在就是在載入之前要讓img有個預設的src, 這時候再給他乙個data-src來儲存真正的src。當頁面要滾動到當前的位置時，把data-src賦值給src,這時候頁面才會去請求這張。
好了，廢話不多說，上**，這是用jq寫的原生的也是一樣的道理
"真正的src" alt=
"真正的src" alt=
"真正的src" alt=
"真正的src" alt=
"真正的src" alt=
"真正的src" alt=
"真正的src" alt=
"真正的src" alt=
"真正的src" alt=
"真正的src" alt=
"">
var imgnum =$(
"img"
).length
var $img =$(
'img');
var num=0;
lazyload()
;$(window)
.scroll
(lazyload)
;function
lazyload
(event)
num++
//避免每次都重第一張開始載入}}
}
web開發前端踩坑
1.inline block總會有間隙 前端布局對齊也可以使用float，但是這樣做會導致被作用塊不佔高度 相當於不存在，脫離了文件流，但是會顯示 前面的塊不佔高度後面跟著的不需要對齊的塊就可能會和前面的塊擠在一起 各種異常 float很好用，但是怎麼才能避免塊坍塌呢？1.在結束float的塊後面加...
前端前置 Git踩坑
git config global user.name zhangsan git config global user.email zhangsan qq.com 檢查cd ssh預設目錄 c users specter.ssh 生成公鑰和私鑰 ssh keygen t rsa c zhangsan...
2017前端大廠踩坑經驗
2016.3 7月 大三下，暑期實習要求較簡單，就不羅列考點了 阿里三面 一面 面試官在看到我眾多的專案跟過獎之後對我印象還不錯，在問及後台的時候，我說我後台接觸php較多，然後打了 諮詢了一番，於是輕鬆過了一面 二面 有幸運到了紫府大神，很是和藹，先讓我寫了一遍的二叉樹遍歷，可惜當時考慮太多，在二...