㈠ react 里 loading 写在哪个生命周期里
说说React
一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。比如日常写一个组件，比较常规的方式：
－ 通过前端模板引擎定义结构
－ JS文件中写自己的逻辑
－ CSS中写组件的样式
－ 通过RequireJS、SeaJS这样的库来解决模块之间的相互依赖，
那么在React中是什么样子呢？
结构和逻辑
在React的世界里，结构和逻辑交由JSX文件组织，React将模板内嵌到逻辑内部，实现了一个JS代码和HTML混合的JSX。
结构
在JSX文件中，可以直接通过 React.createClass 来定义组件：
var CustomComponent = React.creatClass({
render: function(){
return ();
}
});
通过这种方式可以很方便的定义一个组件，组件的结构定义在render函数中，但这并不是简单的模板引擎，我们可以通过js方便、直观的操控组件结构，比如我想给组件增加几个节点：
var CustomComponent = React.creatClass({
render: function(){
var $nodes = ['h','e','l','l','o'].map(function(str){
return ({str});
});
return ({$nodes});
}
});
通过这种方式，React使得组件拥有灵活的结构。那么React又是如何处理逻辑的呢？
逻辑
写过前端组件的人都知道，组件通常首先需要相应自身DOM事件，做一些处理。必要时候还需要暴露一些外部接口，那么React组件要怎么做到这两点呢？
事件响应
比如我有个按钮组件，点击之后需要做一些处理逻辑，那么React组件大致上长这样：
var ButtonComponent = React.createClass({
render: function(){
return (屠龙宝刀，点击就送);
}
});
点击按钮应当触发相应地逻辑，一种比较直观的方式就是给button绑定一个 onclick 事件，里面就是需要执行的逻辑了：
function getDragonKillingSword() {
//送宝刀
}
var ButtonComponent = React.createClass({
render: function(){
return (屠龙宝刀，点击就送);
}
});
但事实上 getDragonKillingSword() 的逻辑属于组件内部行为，显然应当包装在组件内部，于是在React中就可以这么写：
var ButtonComponent = React.createClass({
getDragonKillingSword: function(){
//送宝刀
},
render: function(){
return (屠龙宝刀，点击就送);
}
});
这样就实现内部事件的响应了，那如果需要暴露接口怎么办呢？
暴露接口
事实上现在 getDragonKillingSword 已经是一个接口了，如果有一个父组件，想要调用这个接口怎么办呢？
父组件大概长这样：
var ImDaddyComponent = React.createClass({
render: function(){
return (
//其他组件
//其他组件
);
}
});
那么如果想手动调用组件的方法，首先在ButtonComponent上设置一个 ref="" 属性来标记一下，比如这里把子组件设置成 ，那么在父组件的逻辑里，就可以在父组件自己的方法中通过这种方式来调用接口方法：
this.refs.getSwordButton.getDragonKillingSword();
看起来屌屌哒~那么问题又来了，父组件希望自己能够按钮点击时调用的方法，那该怎么办呢？
配置参数
父组件可以直接将需要执行的函数传递给子组件：
然后在子组件中调用父组件方法：
var ButtonComponent = React.createClass({
render: function(){
return (屠龙宝刀，点击就送);
}
});
子组件通过 this.props 能够获取在父组件创建子组件时传入的任何参数，因此 this.props 也常被当做配置参数来使用
屠龙宝刀每个人只能领取一把，按钮点击一下就应该灰掉，应当在子组件中增加一个是否点击过的状态，这又应当处理呢？
组件状态
在React中，每个组件都有自己的状态，可以在自身的方法中通过 this.state 取到，而初始状态则通过 getInitialState() 方法来定义，比如这个屠龙宝刀按钮组件，它的初始状态应该是没有点击过，所以 getInitialState 方法里面应当定义初始状态 clicked: false 。而在点击执行的方法中，应当修改这个状态值为 click: true ：
var ButtonComponent = React.createClass({
getInitialState: function(){
//确定初始状态
return {
clicked: false
};
},
getDragonKillingSword: function(){
//送宝刀
//修改点击状态
this.setState({
clicked: true
});
},
render: function(){
return (屠龙宝刀，点击就送);
}
});
这样点击状态的维护就完成了，那么render函数中也应当根据状态来维护节点的样式，比如这里将按钮设置为 disabled ，那么render函数就要添加相应的判断逻辑：
render: function(){
var clicked = this.state.clicked;
if(clicked)
return (屠龙宝刀，点击就送);
else
return (屠龙宝刀，点击就送);
}
小节
这里简单介绍了通过JSX来管理组件的结构和逻辑，事实上React给组件还定义了很多方法，以及组件自身的生命周期，这些都使得组件的逻辑处理更加强大
资源加载
CSS文件定义了组件的样式，现在的模块加载器通常都能够加载CSS文件，如果不能一般也提供了相应的插件。事实上CSS、图片可以看做是一种资源，因为加载过来后一般不需要做什么处理。
React对这一方面并没有做特别的处理，虽然它提供了Inline
Style的方式把CSS写在JSX里面，但估计没有多少人会去尝试，毕竟现在CSS样式已经不再只是简单的CSS文件了，通常都会去用Less、
Sass等预处理，然后再用像postcss、myth、autoprefixer、cssmin等等后处理。资源加载一般也就简单粗暴地使用模块加载器
完成了
组件依赖
组件依赖的处理一般分为两个部分：组件加载和组件使用
组件加载
React没有提供相关的组件加载方法，依旧需要通过
㈡ jQuery mobile之loading的问题 小白求助大神
回答：你那链接要在a标签中加上data-ajax=false
jquery mobile 垃圾的东西，千万别用它，我用它搞死了：
1、前端用它和页面的风格不统一，这货单独拿出一个比如按钮什么的样式挺好的，放到项目中总是怪怪的。
2、js默认ajax，总出现一些默名的问题。
3、CSS样式修改麻烦，要在当前标签覆盖才生效。
4、加载太多。
忠告：宁可麻烦点自已写也不要图省事用这破玩意。
参考：http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp
㈢ front-end loading是什么意思
ront-end loading
英[ˈfrʌntˌend ˈləʊdɪŋ]
美[ˈfrʌntˌɛnd ˈlodɪŋ]
[释义] 期初加重收费;
例句
A projecting forward part, such as the front end of a ski.
前端的突出部分向前突出的前端，比如滑雪板的前端
The Tundra's front end has been mildly reworked.
腾华的前端已轻度返工。
㈣ APP中的6种常见数据加载
1.
全屏加载
全屏加载也叫白屏加载，就是整个屏幕白屏进行数据加载，一般会有菊花转或进度条配合，常用于手机网页的加载中，例如列表页进入详情页，图片详情等。（可考虑融入趣味性较强的小动画，增强愉悦感，从用户心理上去缩短等待时间。
优点：能保证内容的整体性，全部加载完才能够系统化的阅读。
缺点：有非常强烈的等待感，3s以上会产生焦躁情绪，所以在地铁等信号 不好的地方，使用手机网 页获取内容实在是比较灾难的一件事情。
2.分布加载
分布加载就是分步骤的加载网页，优先加载占网络资源较小的元素，包括优先加载，懒加载，预加载，渐进加载。
a.优先加载
如果一个页面有图片有文字，可以先把文字都加载出来，保证用户可以有内容可读，然后再加载比较费流量的图片。但是活动页什么的，千万不能把重要信息全部放在图片上，导致加载不出来。这种加载形式更加适用于内容阅读型的APP。
懒加载主要是针对前端页面比较大而设计出来的一种方式，假如一个网页很大，又含有很多图片、视频内容，那么想一次性加载就会等待很久，懒加载就是只有在屏幕显示范围内的资源，被用户看到的内容才会真正去加载。
预加载就是提前加载，比如启动APP时，当显示启动画面时，就可以预先把首页内容加载出来，这样可以减少用户加载内容时的等待时间，还有一个很典型的使用场景就是浏览视频网站或者购物网站，当我们快要滑到页面底部时，下面图片已经几乎加载完成了，这就是预加载的好处，在使用上感觉更加流畅。
渐进加载
在 PC 端用浏览器看图片的时候，经常是先看到一张模糊图，然后再渐渐的变得清晰，这种效果就叫做渐进式加载。
优点：可以帮助用户快速阅读内容，了解信息。
缺点：也许会丢失掉重要的关键信息，无法建立信息获取的闭环。
3.整页加载
当当前页与下一页是整页切换的时候，可以考虑采用整页加载的形式，但是要保证每个页面的数据量不是特别的大。一般适用于宫格图片模式、全屏图片模式、网状详情页模式。
优点：能保证每个页面的完整性，体验比较整体。
缺点：不好保证整页的加载效率，且有可能影响浏览的流畅度。
4.自动加载
当你浏览信息时，不停的向上滑动，新的内容会不停的从底部出现，这种方式称为自动加载。关于自动加载，要注意每次加载多少条内容，或者多少屏的内容，我无聊的数了数今日头条每次会自动加载60条新闻。
优点：把用户代入无尽浏览模式，让用户一直向下滚动，不需要手动点击下一页。
缺点：没有尽头，容易迷失，不方便快速索引定位到某个内容。
5.智能加载
这个加载模式我经常使用到，假如是在WIFI情况下，使用QQ浏览器去看视频，那么它会自动加载视频播放，而使用4G的流量去访问视频页面的话，会有一个弹窗来确认是否要播放，以免耗费大量流量造成用户扣费。智能加载模式就是根据用户使用场景来改变加载形式的。
例如今日头条在WiFi模式下，图片大图展示，当处于非WiFi模式下时，展示小缩略图，当用户觉得某张图有足够的吸引力时，点击小缩略图加载大图，帮助用 户节省流量。再比如爱奇艺在非WiFi的模式下播放视频时，会提示用户继续播放会产生流量费用，这类设计就比较人性化，也容易让用户产生好感，建户忠诚 度。（用户知道你是在为他着想，毕竟流量还是挺贵的！）
优点：根据具体场景来控制流量和加载速度。
缺点：不一定真实有效的命中用户需求，所以还是需要给予用户一定的查看详情的入口，或者是设置项。
6.离线加载
当用户没网的时候，往往很多功能都不能用了，内容也无法加载出来，导致APP变得根本不可用，这时候就要考虑预加载 离线缓存的设计了。首先在有网 的时候把数据提前加载下来，缓存到本地，当没网的时候，直接加载已经缓存下来的内容。一般会提供给用户选择，是否开启有WiFi的情况下预加载功能，或者 是否开始WiFi下全部离线缓存的功能。这样便可在一定程度上减少地铁上信号时好时差而无法正常使用产品所带来的困扰了。但考虑到手机空间，要设计合适的离线机制。并配合一定的清理缓存的机制。适用于小说阅读、新闻阅读、视频类APP。
优点：解决了没网获取数据的问题，且节约了流量，保证了流畅。
缺点：占用本地存储空间，而且有时候预加载的内容根本没有用到。
三、4种减少等待感的设计
1.使用模态加载
尽量使用非模态的加载方式，在加载的过程不打断用户，不需要等待加载完就可以做别的事情的，而不用傻傻等待数据加载完成，大大降低了等待的焦躁感，提升用户体验流畅度。
模态加载：app在触发加载后，出现模态提示层，防止用户在加载过程中进行其他操作，导致当前加载出错。如果采用模态加载，会因为网络原因或内容过多导致长时间处于加载状态，建议提供一个“取消”的操作。同时在安卓中的后退按钮能关闭模态提示。
2. 情感化的加载动画
用户等待加载的过程是相当痛苦的，因为他迫切的想看到页面内容，通过设计一些呆萌可爱的加载动画，让用户在等待的过程中享受动画的愉悦感，让产品情感化，在心理层面上去减少用户的急躁感。
3.
进度条加载
如果是时间较长的加载过程，最好能清晰的告知过程进度，让用户有更加明确的知情权，和加载的时间预期。一个非常经典的体验设问，同样是3s的加载时 间，匀速的进度条、先慢后快的进度条、先快后慢的进度条，哪个让用户感觉上最快?经过科学的实验证实，先慢后快的进度条是让用户心理感受上最快的设计。这是因为用户最容易记住最后一瞬间的感觉，如果最后一瞬间，感知到了快，就觉得顺畅了。
4.
尽量提前加载
尽可能的利用预加载或有WiFi的情况下离线缓存的方式，把内容提前加载下来，这样能做到最大限度的降低加载给用户带来的卡顿感。如果能判断出来用户下一步要做的事情，提前帮用户加载相应的内容，肯定是最符合需求场景的事情。当我开始读第一页的时候，第二页第三页就开始陆续缓存下来了
5.启动页加载
这个主要是APP启动时的一个页面，由于APP启动需要时间，因此可以加入一个启动页来自然过渡，而且很多启动页是广告，这样也可以带来一些收益，这个页面一般可以点击跳过。
移动互联网的场景多种多样，我们在设计的时候需要考虑各种各样的场景，例如WiFi下、非WiFi下、无网络、又或者说电梯里、地铁上等等。但是咋们的目的也只有一个：优化用户体验，提高商业价值。所以无论设计什么功能模块都应该多考虑一下用户的使用场景。
如何降低用户的焦虑感？
由于存在网速不快，网络异常，服务器异常等情况，让用户等待的情况是必不可少的。但是我们都知道，等待会产生焦虑感，分分钟让用户卸载你的产品，那么我们可以通过哪些手段来降低或缓解用户的焦虑感？
第一：优化App的加载算法，使得App与服务器数据传输的时间减短。 这个需要开发人员的精益求精了。这个是从根本上解决了问题，因为直接减少了加载数据的时间，也就减少了用户需要等待的时间。
第二：采用预加载和智能加载的方式。 拿阅读App打比方，当用户在看第一页的时候，App在后台加载完后面的几页，等用户翻到第二页的时候就不需要等待加载了，因为App已经帮用户提前加载好了。这种加载机制对用户体验特别好，但是存在一个问题，就是要预测用户行为，加载其他数据，这样会消耗不少流量，所以建议在WiFi网络环境下采取这种预加载机制，而在蜂窝网络状态下则不采用预加载机制。这个要和开发人员讨论沟通，确保预加载机制完美运行。
第三：异步处理。 这一点做得好的App莫过于Instagram，不知道你有没有发现，用Instagram的时候会觉得特别流畅，即使在网络不好的情况下。这是为什么？因为在网络不好的情况下，你给好友点了赞，Instagram并不会提示你网络不好，操作失败，而是提示你点赞成功了，其实它只是将你点赞的操作记录了下来，等网络一好就将点赞的行为上传到服务器，从而完成点赞行为。这就是让产品自己去解决问题，而不是把问题抛给用户。
第四：设计有趣的loading动画，如上文介绍的美团APP奔跑的小人，这是提升产品情感的重要手段。
㈤ vtloading之后就错误
系统bug。vloading是一款前端学习软件，该软件在运行时如果一直出现错误字样，是系统bug的原因，只需要将该软件卸载重新打开即可。
㈥ 前端 loading加载，怎么做
onload事件是网页所有内容载入完后激活。 那么如果你做loading效果。
只能用它去处理了。 做个loading的div 最onload事件里隐藏它。
㈦ 后端实时生成图片，前端VUE如何获取并展示
用blob的方式获取后端实时生成的图片，在图片生成之后再显示，生成中加载loading
getBlobPic(works){
axios({
method:"get",
url:'/api/competition/my-works-basecert?works_id=' + works.id,
responseType:'blob'
}).then((response)=>{
if(response.status===200){
const {data,headers}=response
const blob=new Blob([data],{ type:headers['content-type'] })
this.certificateImg=window.URL.createObjectURL(blob)
this.certificateloading=false;
}else{
this.certificateloading=false;
}
}).catch((error)=>{
this.certificateloading=false;
})
}
㈧ 前端接口loading是统一写还是分别写
统一写。前端接口loading编程中的一个前提，是为了保证后端不会影响编程的运行，分开写的话后端有的编程就会运行不了，因此是需要统一写的。就是按照项目的接口文档所定义的接口，只要涉及到输入和输出的数据集合的，就是接口。