html5懒加载,前端页面懒加载

HTML基础知识（22）

1、Vue 扩展插件：

*vue-cli: vue 脚手架

*vue-resource(axios): ajax 请求

*vue-router: 路由

*vuex: 状态管理

*vue-lazyload: 图片懒加载

*vue-scroller: 页面滑动相关

*mint-ui: 基于 vue 的 UI 组件库(移动端)

*element-ui: 基于 vue 的 UI 组件库(PC 端)

*它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

2、双大括号表达式

*语法:{{exp}}

*功能: 向页面输出数据

*可以调用对象的方法

3、强制数据绑定：

指定变化的属性值

写法：v-bind:xxx='yyy'   //yyy 会作为表达式解析执行

简介写法：:xxx='yyy'

4、绑定事件监听：

绑定指定之间名的回调函数

完整写法：v-on:keyup='xxx'

v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'

简洁写法：@keyup='xxx' @keyup.enter='xxx'

5、计算属性：

*在 computed 属性对象中定义计算属性的方法

*在页面中使用{{方法名}}来显示计算的结果

6、监视属性：

*通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性

*当属性变化时, 回调函数自动调用, 在函数内部进行计算

7、计算属性高级

*通过 getter/setter 实现对属性数据的显示和监视

*计算属性存在缓存, 多次读取只执行一次 getter 计算

8、class 与 style 绑定：

class/style 绑定是专门用来实现动态样式效果的技术

class绑定：*:class='xxx'

*表达式是字符串: 'classA'

*表达式是对象: {classA:isA, classB: isB}

*表达式是数组: ['classA', 'classB']

style绑定：:style="{ color: activeColor, fontSize: fontSize + 'px' }"（其中 activeColor/fontSize 是 data 属性）

9、条件渲染：

指令：v-if 与 v-else及v-show

注意点：如果需要频繁切换 v-show 较好

当条件不成立时, v-if 的所有子节点不会解析

10、列表渲染：

指令：数组: v-for / index ； 对象: v-for / key

更新显示：删除 item ； 替换 item

高级处理：列表过滤 ； 列表排序

相关问答

Q1: 图片懒加载和预加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式 。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中， 当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。 预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源 。

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

img src=" 0044449030002.jpg" style="display:none"/

script src="./myPreload.js"/script

PreloadJS提供了一种预加载内容的一致方式，以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能更好。

两者都是提高页面性能有效的办法， 两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力

转：

Q2: html 图片很多的情况下，怎样实现先打开页面，再慢慢加载？

!DOCTYPE HTML

html

head

    titlePage Title/title

    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /

    script

        onload = function() {

            var imgs = document.querySelectorAll("img");

            console.log("加载中...");

            for (var i = 0; i  imgs.length; i++) {

             var img = imgs[i];

                (function(i) {

                    setTimeout(function() {

                        img.src = "a" + i + ".jpg";

                        img.onload = function(){

                         if(i == imgs.length - 1){

                         console.info("加载完毕");

                         }

                        }

                        img.onerror = function(){

                         console.error("加载错误");

                        }

                    }, 2000 * i);

                })(i);

            }

        }

    /script

/head

body

    img /

    img /

    img /

    img /

/body

/html

Q3: JS 实现页面的懒加载

页面加载来自网络的图片时，可能会花费大量的时间，因此如果使用懒加载，能够让用户体验不到加载的过程

至此，我们便可以在页面中使用懒加载来优化用户体验了。

lazyLoad.html