HTML的延迟加载属性defer的使用技巧

. 介绍

1.1 介绍

福哥最近处理一个客户的网站JS错误发现了一个诡异的情况，就是前面载入了一个JQ的插件，后面调用这个插件，提示插件不是一个函数。

经过一顿查询，发现载入插件的地方有个“defer”属性，查资料得知这个属性告知浏览器在全部网页都加载完成之后再加载这个插件代码。

我去，全部加载完成之后再加载插件代码，那么这里调用插件肯定失败啊~~

2. 正常模式

正常模式下，先加载jquery库，后打印版本信息，一切顺利~~

2.1 代码

<script type="text/javascript" src="http://sample.com/js/jquery.js"></script>
<script>
    console.log(jQuery.fn.jquery);
</script>

2.2 效果

3. 延迟模式

3.1 代码

现在给加载jquery库使用延迟模式，再来打印版本信息，报错了。

因为打印版本信息的时候jquery库还没有加载，当然是找不到了。

<script type="text/javascript" src="http://sample.com/js/jquery.js" defer></script>
<script>
    console.log(jQuery.fn.jquery);
</script>

3.2 效果

4. 正确延迟模式

要解决这个问题，需要将代码放入页面加载完成后的位置执行，这里使用的是onreadystatechange事件判断的页面加载状态（因为jQuery被延迟了，只能用原生JS了）。

4.1 代码

<script type="text/javascript" src="http://sample.com/js/jquery.js" defer></script>
<script>
    document.onreadystatechange = function () {
        if(this.readyState == "complete"){
            console.log(jQuery.fn.jquery);
        }
    };
</script>

5. 总结

福哥今天给大家讲解了关于HTML的延迟加载属性defer的相关知识，使用延迟加载可以“提高页面加载速度”，让用户直观上感觉页面速度比较快！但是，如果使用不当就会造成JS代码错误的问题。

https://m.tongfu.net/home/35/blog/512979.html

几个简单的加载中动画吧。

像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法：scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。

第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用：translateY(n)：定义 2D 转换，沿着 Y 轴移动元素，从而实现小球沿Y方向来回移动。

废话不多说了，上代码。

首先，第一个加载中的动画：

html Code

<div id="loading1">
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
 </div>

css Code

.demo1 {
     width: 4px;
     height: 4px;
     border-radius: 2px;
     background: #68b2ce;
     float: left;
     margin: 0 3px;
     animation: demo1 linear 1s infinite;
     -webkit-animation: demo1 linear 1s infinite;
 }
 .demo1:nth-child(1){
     animation-delay:0s;
 }
 .demo1:nth-child(2){
     animation-delay:0.15s;
 }
 .demo1:nth-child(3){
     animation-delay:0.3s;
 }
 .demo1:nth-child(4){
     animation-delay:0.45s;
 }
 .demo1:nth-child(5){
     animation-delay:0.6s;
 }
 @keyframes demo1 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scale(2.5);}
 }
 @-webkit-keyframes demo1 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scale(2.5);}
 }

css Code

第二个动画和第一个动画大同小异，第一个动画是将小球整体变大变小，第二动画则是将小方块的高度变大变小，而宽度不变：

html Code

 <div id="loading2">
     <div class="demo2"></div>
     <div class="demo2"></div>
     <div class="demo2"></div>
     <div class="demo2"></div>
     <div class="demo2"></div>
 </div>

css Code

.demo2 {
     width: 4px;
     height: 6px;
     background: #68b2ce;
     float: left;
     margin: 0 3px;
     animation: demo2 linear 1s infinite;
     -webkit-animation: demo2 linear 1s infinite;
 }
 .demo2:nth-child(1){
     animation-delay:0s;
 }
 .demo2:nth-child(2){
     animation-delay:0.15s;
 }
 .demo2:nth-child(3){
     animation-delay:0.3s;
 }
 .demo2:nth-child(4){
     animation-delay:0.45s;
 }
 .demo2:nth-child(5){
     animation-delay:0.6s;
 }
 @keyframes demo2 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scaleY(3);}
 }
 @-webkit-keyframes demo2 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scaleY(3);}
 }

css Code

第三个动画就需要将小球的位置定位一下，让几个小球整体上看起来围成一个圆，然后就像第一个一样使小球变大变小：

html Code

 <div id="loading1">
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
 </div>

css Code

#loading3 {
     position: relative;
     width: 50px;
     height: 50px;
 }
 .demo3 {
     width: 4px;
     height: 4px;
     border-radius: 2px;
     background: #68b2ce;
     position: absolute;
     animation: demo3 linear 0.8s infinite;
     -webkit-animation: demo3 linear 0.8s infinite;
 }
 .demo3:nth-child(1){
     left: 24px;
     top: 2px;
     animation-delay:0s;
 }
 .demo3:nth-child(2){
     left: 40px;
     top: 8px;
     animation-delay:0.1s;
 }
 .demo3:nth-child(3){
     left: 47px;
     top: 24px;
     animation-delay:0.1s;
 }
 .demo3:nth-child(4){
     left: 40px;
     top: 40px;
     animation-delay:0.2s;
 }
 .demo3:nth-child(5){
     left: 24px;
     top: 47px;
     animation-delay:0.4s;
 }
 .demo3:nth-child(6){
     left: 8px;
     top: 40px;
     animation-delay:0.5s;
 }
 .demo3:nth-child(7){
     left: 2px;
     top: 24px;
     animation-delay:0.6s;
 }
 .demo3:nth-child(8){
     left: 8px;
     top: 8px;
     animation-delay:0.7s;
 }
 
 @keyframes demo3 
 {
     0%,40%,100% {transform: scale(1);}
     20% {transform: scale(3);}
 }
 @-webkit-keyframes demo3 
 {
     0%,40%,100% {transform: scale(1);}
     20% {transform: scale(3);}
 }

接下来是第四个动画：

1 <div id="loading5">
2      <div class="demo5"></div>
3 </div>

 #loading5 {
     width: 20px;
     height: 100px;
     border-bottom: 1px solid #68b2ce;
 }
 .demo5 {
     width: 20px;
     height: 20px;
     border-radius: 10px;
     background: #68b2ce;
     animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
     -webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
 }
 @keyframes demo5
 {
     0%{
         transform:translateY(0px);
         -webkit-transform:translateY(0px);
     }
     100% {
         transform:translateY(80px);
         -webkit-transform:translateY(80px);
     }
 }
 @-webkit-keyframes demo5
 {
     0%{
         transform:translateY(0px);
         -webkit-transform:translateY(0px);
     }
     100% {
         transform:translateY(80px);
         -webkit-transform:translateY(80px);
     }
 }

css Code

以上就是这几个简单的加载中小动画的内容了。

转载 https://www.cnblogs.com/tangchan/p/7604594.html

一篇文章Stimulus 状态管理，幻灯片显示讲述了Stimulus的状态管理，接下来我们看看如何跟踪外部资源的状态。

有时候我们的controllers需要跟踪外部的资源的状态，这里的外部指的是不在DOM或不在Stimulus中的任何东西。例如，我们可能需要发出HTTP请求，并在请求状态变化时进行响应。或者我们希望启动一个定时器，然后当controller断开连接时停止定时器。在本文，我们将解决这些问题。

接下来，我们学习一下，如何通过加载和插入远程HTML片段，来异步填充页面的各个部分。

我们要创建一个通用的用于加载内容的controller，所有的HTML内容都是从服务器获取的。然后我们将用它来加载一系列未读的消息，就像你在邮箱里看到的那样。

打开public/index.html：

<div data-controller="content-loader"
    data-content-loader-url-value="/messages.html"></div>

然后创建一个public/messages.html

<ol>
    <li>New Message: Stimulus Launch Party</li>
    <li>Overdue: Finish Stimulus 1.0</li>
</ol>

在真实应用中，这个内容是服务器动态生成的，但是这里出于示范的目的，我们就用一个静态文件。

现在我们实现一下我们的controller：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static values = { url: String }

    connect() {
        this.load()
    }

    load() {
        fetch(this.urlValue)
            .then(response => response.text())
            .then(html => this.element.innerHTML = html)
    }
}

当controller连接元素时，会根据data-content-loader-url-value属性值设置的url，发起请求。然后把请求得到的HTML内容，赋值给连接元素的innerHTML。

打开浏览器的开发者工具，点开网络查看tab页，然后刷新页面。您将看到一个表示初始页面加载的请求，随后是controller对messages.html的后续请求。

我们继续优化一下controller，隔段时间就刷新div内的内容，让它一直显示最新的内容。

我们使用data-content-loader-refresh-interval-value属性值来设定刷新的时间间隔，单位是毫秒，

<div data-controller="content-loader"
    data-content-loader-url-value="/messages.html"
    data-content-loader-refresh-interval-value="5000"></div>

现在我们修改一下controller，检查间隔，如果间隔值存在，就启动一个定时器来刷新。

在controller里添加一个static values，然后定义一个新方法startRefreshing():

export default class extends Controller {
    static values = { url: String, refreshInterval: Number }
    
    startRefreshing() {
        setInterval(() => {
            this.load()
        }, this.refreshIntervalValue)
    }

    // …
}

然后修改connect()方法，如果refreshInterval值存在的话，就调用startRefreshing()方法。

connect() {
    this.load()

    if (this.hasRefreshIntervalValue) {
        this.startRefreshing()
    }
}

刷新页面，然后通过开发者工具，观察一下，是不是每5秒钟就会有一个新请求。然后可以尝试修改public/messages.html，所有的改变都会出现在div内。

当controller连接元素时，我们启动了定时器，但是我们没有停止它。这意味着，如果我们的controller连接的元素消失的话，controller将在后台继续发起HTTP请求。

我们修复这个问题，修改startRefreshing()方法，保存一个对定时器的引用：

startRefreshing() {
    this.refreshTimer = setInterval(() => {
        this.load()
    }, this.refreshIntervalValue)
}

然后添加一个对应的stopRefreshing()方法，来取消定时器：

stopRefreshing() {
    if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
    }
}

最终，我们告诉Stimulus当controller失去连接时，取消定时器，好，我们添加一个disconnect()方法：

disconnect() {
    this.stopRefreshing()
}

现在我们可以确定，内容加载器controller只会在连接到DOM时才会发出请求。

我们来看一下最终的controller类：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static values = { url: String, refreshInterval: Number }

    connect() {
        this.load()

        if (this.hasRefreshIntervalValue) {
            this.startRefreshing()
        }
    }

    disconnect() {
        this.stopRefreshing()
    }

    load() {
        fetch(this.urlValue)
            .then(response => response.text())
            .then(html => this.element.innerHTML = html)
    }

    startRefreshing() {
        this.refreshTimer = setInterval(() => {
            this.load()
        }, this.refreshIntervalValue)
    }

    stopRefreshing() {
        if (this.refreshTimer) {
            clearInterval(this.refreshTimer)
        }
    }
}

本文介绍了如何使用Stimulus生命周期回调来获取和释放外部资源。

在线咨询

上一篇：CSS 中几种最常用的水平垂直居中的方法
下一篇：前端性能优化(二)-浏览器缓存机制

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML的延迟加载属性defer的使用技巧

. 介绍

2. 正常模式

3. 延迟模式

4. 正确延迟模式

5. 总结

您的项目需求