![](https://cdn-r.oss-cn-hangzhou.aliyuncs.com/pro/image/PC/dailyTopic_icon_01.png)
![](https://cdn-r.oss-cn-hangzhou.aliyuncs.com/pro/image/PC/wenna-hot.png)
扫码关注公众号
懒加载的特点
减少无用资源的加载:使用懒加载明显减少了服务器的压力和流量,同时也减小了浏览器的负担。提升用户体验:如果同时加载较多图片,可能需要等待的时间较长,这样影响了用户体验,而使用懒加载就能大大的提高用户体验。防止加载过多图片而影响其他资源文件的加载:会影响网站应用的正常使用。
懒加载的实现原理
图片的加载是由src引起的,当对src赋值时,浏览器就会请求图片资源。根据这个原理,我们使用HTML5的data-xxx属性来储存图片的路径,在需要加载图片的时候,将data-xxx中图片的路径赋值给src,这样就实现了图片的按需加载,即懒加载。注意:data-xxx中的xxx可以自定义,这里我们使用data-src来定义。懒加载的实现重点在于确定用户需要加载哪张图片,在浏览器中,可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时,获取图片的真实地址并赋值给图片即可。使用原生JavaScript实现懒加载:知识点:(1)window.innerHeight是浏览器可视区的高度(2)document.body.scrollTop||document.documentElement.scrollTop是浏览器滚动过的距离(3)imgs.offsetTop是元素顶部距离文档顶部的高度(包括滚动条的距离)(4)图片加载条件:img.offsetTop<window.innerHeight+document.body.scrollTop;图示:<divclass="container"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"></div><script>varimgs=document.querySelectorAll('img');functionlozyLoad(){varscrollTop=document.body.scrollTop||document.documentElement.scrollTop;varwinHeight=window.innerHeight;for(vari=0;i<imgs.length;i++){if(imgs[i].offsetTop<scrollTop+winHeight){imgs[i].src=imgs[i].getAttribute('data-src');}}}window.onscroll=lozyLoad();</script>复制代码
vue-router 中常用的路由模式
hash模式location.hash的值实际就是URL中#后面的东西它的特点在于:hash虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。可以为hash的改变添加监听事件window.addEventListener("hashchange",funcRef,false);每一次改变hash(window.location.hash),都会在浏览器的访问历史中增加一个记录利用hash的以上特点,就可以来实现前端路由“更新视图但不重新请求页面”的功能了特点:兼容性好但是不美观history模式利用了HTML5HistoryInterface中新增的pushState()和replaceState()方法。这两个方法应用于浏览器的历史记录站,在当前已有的back、forward、go的基础之上,它们提供了对历史记录进行修改的功能。这两个方法有个共同的特点:当调用他们修改浏览器历史记录栈后,虽然当前URL改变了,但浏览器不会刷新页面,这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。特点:虽然美观,但是刷新会出现404需要后端进行配置(一般是将页面配置重定向到首页路由)总结hash模式是开发中默认的模式,如果想要切换到history模式,就要进行以下配置(后端也要进行配置):constrouter=newVueRouter({mode:'history',routes:[...]})