cid=89 本文章当初是为了给父亲讲述一下政务网站新闻发布,细心的老爹竟然看得出来大部分烟台地区的政务网站都是一套系统,其实这合情合理,毕竟不能每个市,区,县的网站独立开发,不利于对数据的维护。
正好博客有后台,其实也就跟父亲展示了一下后台发布文章的功能,这也是我没有选择ghost
.hexo
的原因,我可以随时随地的写文章,而不需要去git
,node
告诉他其实政府新闻办宣传部什么的只是把文章复制进去而已……毕竟公务员不是程序员,估计也允许markdown
写文章吧,所以随便打了个数字……
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。
思路:
将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src。
懒加载 :为什么
解决页面假死状态
单页面vue和react,,只有一个HTML,首屏加载慢,后期切换比较快,不利于搜索引擎优化(SU),前端渲染的都不利于
首屏做到500kb才利于用户体验,最大不要超过1兆
关于各种宽高:
页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
示例:
jqueryLazyload方式
下载地址:https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js
<section class="module-section" id="container">
<img