HTML5+CSS3+JavaScript Web前端开发案例教程课件：页面骨架屏布局.pptxVIP

页面骨架屏布局

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：页面骨架屏布局核心功能：发送AJAX异步请求骨架屏等待效果动态渲染页面数据

案例介绍页面骨架屏布局效果

02技术准备

技术准备技术1：AJAX异步请求AJAX（全称AsynchronousJavascriptAndXML，即JavaScript和XML）本身并不是一种新的技术，而是在2005年被JesseJamesGarrett提出的一个新术语。

技术准备

技术准备XMLHttpRequest对象可以提供给前端开发人员使用JavaScript发起HTTP请求的能力。该对象会被简称为XHR对象。其使用代码如下：varxhr=newXMLHttpRequest();

技术准备AJAX异步请求示例代码：varxhr=newXMLHttpRequest();//readyState改变的监听事件函数xhr.onreadystatechange=function(){//判断当前请求的状态与请求的状态码if(xhr.readyState===4xhr.status===200){console.log(xhr.responseText);//输出服务端返回的内容}}xhr.open(GET,/,true);//设定GET请求，请求的路径是/，并且请求是异步的xhr.send();//发送数据

技术准备技术2：Flex弹性布局Flex是FlexibleBox的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。Flex布局又称弹性布局，其特点是可以实现子元素的自适应屏幕大小，父元素可以自由地分配每一个子元素需要占用的空间比例。

技术准备采用Flex布局的元素，称为Flex容器（flexcontainer），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称”项目”。

技术准备Flex容器属性：属性可选值描述flex-directionrow|row-reverse|column|column-reverse决定主轴的方向（即项目的排列方向）flex-wrapnowrap|wrap|wrap-reverse决定容器中的项目是否换行flex-flowflex-directionflex-wrapflex-direction属性和flex-wrap属性的简写形式，默认值为rownowrapjustify-contentflex-start|flex-end|center|space-between|space-around定义了项目在主轴上的对齐方式align-itemsflex-start|flex-end|center|baseline|stretch定义项目在交叉轴上如何对齐align-contentflex-start|flex-end|center|space-between|space-around|stretch定义了多根轴线的对齐方式

技术准备Flex项目属性：属性可选值描述orderinteger定义项目的排列顺序。数值越小，排列越靠前，默认为0flex-grownumber定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大flex-shrinknumber定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小flex-basislength|auto定义了在分配多余空间之前，项目占据的主轴空间（mainsize）flexnone|[flex-growflex-shrink?||flex-basis]flex-grow,flex-shrink和flex-basis的简写，默认值为01autoalign-selfauto|flex-start|flex-end|center|baseline|stretch允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

03案例实现

案例实现文件结构：