前端性能优化之Lazyload
生活随笔
收集整理的這篇文章主要介紹了
前端性能优化之Lazyload
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、Lazyload的理解分析
Lazyload技術(shù)是一種延遲加載技術(shù)，讓頁(yè)面加載速度快到飛起、減輕服務(wù)器壓力、節(jié)約流量、提升用戶體驗(yàn)
實(shí)現(xiàn)思路
1）頁(yè)面較長(zhǎng)，屏幕的可視區(qū)域有限
2）不設(shè)置頁(yè)面中img標(biāo)簽的src屬性值或者將其指向同一個(gè)占位圖
3）圖片的實(shí)際地址存在img標(biāo)簽自定義的一個(gè)屬性中，如：“data-url”
4）監(jiān)聽scroll，滾動(dòng)到某個(gè)位置時(shí)，動(dòng)態(tài)的將url替換成實(shí)際的“data-url”
流程圖分析:
代碼實(shí)現(xiàn)
html部分：
js部分：
var aImg = [{"src":"http://mob.com/public/images/index/sharesdk-logo.jpg","txt":"ShareSDK輕松實(shí)現(xiàn)社會(huì)化功能"},{"src":"http://mob.com/public/images/index/sms-logo.jpg","txt":"短信驗(yàn)證碼SDK"},{"src":"http://mob.com/public/images/index/rec-logo.jpg","txt":"MobLink實(shí)現(xiàn)Web與App的無(wú)縫鏈接"} ]; var sLi = ''; document.getElementsByClassName("mob-wrap")[0].innerHTML=""; for(let i = 0;i<10;i++){sLi = document.createElement("li");sLi.innerHTML = `<img class="tamp-img" alt="loading" src="./zwt.gif" data-src="${aImg[i%3].src}"><p>${aImg[i%3].txt}</p>`;document.getElementsByClassName("mob-wrap")[0].appendChild(sLi); };window.onscroll = function () {var bodyScrollHeight = document.documentElement.scrollTop;// body滾動(dòng)高度var windowHeight = window.innerHeight;// 視窗高度var imgs = document.getElementsByClassName('tamp-img');for (var i =0; i < imgs.length; i++) {var imgHeight = imgs[i].offsetTop;// 圖片距離頂部高度 if (imgHeight < windowHeight + bodyScrollHeight - 340) {imgs[i].src = imgs[i].getAttribute('data-src');imgs[i].className = imgs[i].className.replace('tamp-img','');}} };二、Lazyload的再優(yōu)化
1）代碼如下：
2）使用節(jié)流函數(shù)：
代碼如下：
3）說(shuō)明：滾動(dòng)時(shí)間least長(zhǎng)于600，調(diào)用compare，否則延遲350ms執(zhí)行。這樣相對(duì)于直接onscroll性能得到更進(jìn)一步提升，在功能上也沒有什么問題，不同的業(yè)務(wù)場(chǎng)景調(diào)整一下delay和least就可以
總結(jié)
以上是生活随笔為你收集整理的前端性能优化之Lazyload的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单几步自己动手用智能手机展示全息立体影
- 下一篇： POS机钱箱的安装与驱动