关于Loading不能正常显示的问题

不渲染数据的情况下，为什么机酒自由行不注释可以显示lodading
jjzyx.art*********************************************************************************
<div class="hd clearfix">
                <h2>机酒自由行</h2>
                <em>挑选全球机票、酒店、邮轮等旅行产品</em>
                <nav>
                    <ul>
                        <li class="current"><a href="">近期好货</a></li>
                        <li><a href="">新品汇聚</a></li>
                        <li><a href="">定制游</a></li>
                        <li><a href="">国内推荐</a></li>
                        <li><a href="">优惠机票</a></li>
                        <li><a href="">热门海岛</a></li>
                        <li><a href="">热门海岛</a></li>
                        <li><a href="">热卖签证</a></li>
                    </ul>
                </nav>
</div>
<div class="bd">
    <%include ('../../../../components/loading/loading.art',{
        inline:true,
        text:'>_\<\正在拼命为您加载中...'
    })%>
</div>
items.art*********************************************************************************
<ul>
    <li class="big-grid">
        <a href="">
            <img src="{{one.url}}" alt="">
        </a>
        <span class="tag">{{one.type}}</span>
        <div class="info">
            <p>{{one.title}}</p>
            <p>{{one['extra-info']}}</p>
        </div>
    </li>
    {{each items}}
    <li class="pro-grid">
        <a href="">
            <div class="picbox">
                <span class="tag">{{$value.type}}</span>
                <img src="{{$value.url}}" alt="">
            </div>
            <div class="wordbox">
                {{$value.title}}
            </div>
        </a>
    </li>
    {{/each}}
    <li class="more-grid">
        <a href="">
            <p>查看更多</p>
            <p>{{more.title}}</p>
            <span class="iconfont">&#xe626;</span>
            <ul class="clearfix">
                {{each more.items}}
                <li>{{$value}}</li>
                {{/each}}
            </ul>
        </a>
    </li>
</ul>

index.js*********************************************************************************
import './jjzyx.css';
import render from './items.art';
import {URL} from './config';
import {getData} from 'api/getData';
const layoutEl=document.querySelector('.jjzyx .bd');
getData(URL).then(data=>{
    // console.log(data);
    layoutEl.innerHTML=render(data)
})

jjzyx.css************************************************************************************
.jjzyx .loading{
    padding-top: 250px;
}

同学你好，老师要了一份你的作业，把同学提供的xxsw和jjzyx的代码都放到了作业中，二者loading效果都是正常的：

如果网络速度很快，那么网络请求会非常快的完成，此时就可能发生看不到loading图（有loading，但是瞬间就被数据替换了）；如果之前请求过数据，那么再次请求，浏览器可能会使用缓存，此时数据几乎会瞬间返回，也容易看不到loading图。所有老师第一次测试时，把渲染数据的代码注释了，就是为了看看到底有没有loading图。另外，同样的网络下，每个请求的时间也是不一样的，机酒自由行的请求时间如果长，那么就可以轻松看到loading；同理如果xxsw的接口响应特别快，那么请求时间就特别短，此时就看不到loading了。

建议同学把getData方法，换成getDelayedData方法测试一下效果（getDelayedData会延时渲染数据，相当于增加了请求时长）：

祝学习愉快！