js怎么异步加载loading

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js怎么异步加载loading相关的知识，希望对你有一定的参考价值。

首先引用jquery.scrollLoading.js(上一篇博文有)和jquery.js
把下面代码放到标签里，就会得到异步加载图片的效果
//这个在我上一篇博文有这个
$(document).ready(function ()
//实现图片慢慢浮现出来的效果
$("img").load(function ()
//图片默认隐藏
$(this).hide();
//使用fadeIn特效
$(this).fadeIn("5000");
);
// 异步加载图片，实现逐屏加载图片
$(".scrollLoading").scrollLoading();
);
注意img里的class，在这里就不细说了
data-url表示将要异步加载的图片，src表示首先加载的图片（一般会是小图片，或者是一个动画，网页中全部的src链接同一个图片，这样网页就加载快好多，这个时候再异步的加载要加载的图片，也就现在要说的功能）
<img class="scrollLoading" data-url="image/logo.jpg" src="/Images/120.gif" /> 参考技术A js异步加载loading的方法如下：
1、获取加载的图片
var image = document.images[0];
2、手动创建一个image对象
var downloadingImage = new Image();
3、调用onload事件加载src真正的链接地址
downloadingImage.onload = function()
image.src = this.src; //src后置指定
;
downloadingImage.src = "目标图片地址";

Vue-七七创建全局组件——“Loading“ 使用extend创建组件——弹出层 单继承：vue组件间的继承。——继承js的部分 异步组件加载 异步组件工厂 组件插槽

🌕写在前面
🍊博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2022年9月03日🌹
🆕最新更新时间：🎄2022年9月03日🎄
✉️人生的价值，并不是用时间考究，而是用深度去衡量的
📠参考书籍：📚《Vue2》
🙏作者水平很有限，如果发现错误，请留言轰炸哦！万分感谢感谢感谢！

v-model/sync组件间传值sync创建全局组件——"Loading"使用extend创建组件——弹出层单继承：vue组件间的继承。——继承js的部分异步组件加载异步组件工厂组件插槽单个插槽/默认插槽/匿名插槽/具名插槽/作用域插槽

v-model/sync组件间传值

  • v-model它可以对于表单项进行数据的双项绑定
  • v-model它是一个语法糖，它是 value和事件[input[默认]]的集合体
<child v-model="title" />
意义等同于
<child :value="title" @input="setTitle" />

则子组件通过:props:["value"]获取。

<template>
    <div>
        <div>子组件</div>
        <h3>value</h3>
    </div>
</template>

<script>
export default 
    props:["value"]

</script>

++ 父组件
<div>
     <h1>父组件</h1>
     <input type="text" v-model="msg">
     <hr>
     <child v-model="msg"></child>
</div>

++ 子组件
<button @click="$emit('input',Date.now())">点击修改父组件信息</button>

修改默认事件：增加一个配置项；
默认的属性名：也可以修改

点击的时候就是事件名称的改变后的值。
<button @click="$emit('change',Date.now())">点击修改父组件信息


</button>
props:["msg"],
//修改v-model它的自定义事件名称，默认为input
model:
    //修改v-model它的自定义事件名称，默认为input
    event:"change",
    //修改v-model它的属性名称，默认为value
    prop:"msg"

sync

也能完成组件间的信息传值。
sync修饰符，他是一语法糖，动态属性和update：属性名称，事件。

父
<child :title.sync="msg"></child>

子
<button @click="setTitle">点击修改父组件信息</button>


props:["title"],
methods:
    setTitle()
        this.$emit("update:title",Date.now())/*固定写法*/

创建全局组件——“Loading”

index.js

import Vue from "vue";
/**
 * 在工程化中，全局组件没有了template,只有el,render,全局组件不能使用el.
 * render中的形参名称必须是h
 */
Vue.component("Loading",
    render:h=>
        // return h("h3",null,"加载中.......")
        // jsx语法
        return (
            <div>
                <h3>加载中.......</h3>
            </div>
        )
    
)

在入口文件中引入：

import '@/components/Loading/index.js'

那其实在工作当中他这个写法不常见：
他把这个全局定义组件给转为局部组件插入的方式生成：

#index.js

import Vue from "vue";
import Loading from './load.vue';
Vue.component("Loading",Loading)

#main.js
import Vue from 'vue'
import App from './App.vue'
import '@/components/Loading/index.js'
Vue.config.productionTip = false
new Vue(
    render: h => h(App),
).$mount('#app')

#App.vue
<Loading/>

使用extend创建组件——弹出层

不会影响层级，样式。
新建一个节点进行挂载：

index.js

import Vue from 'vue'
import Popup from './root2.vue'
const Cmp =  Vue.extend(Popup);
new Cmp().$mount("#root2")

在入口文件中导入：

import '@/components/root2/index.js'

点击后显示：

import Vue from 'vue'
import Popup from './root2.vue'
const Cmp =  Vue.extend(Popup);
export default () => new Cmp().$mount("#root2")
导出为一个方法，方法返回值执行一个对象。

##main.js
加载进导入工程文件中
import Pupop from '@/components/root2/index.js'
Vue.prototype.Pupop = Pupop;


## App.vue
methods:
   set()
       this.Pupop();

单继承：vue组件间的继承。——继承js的部分

只能继承js的部分。不能继承方法
可以继承原来的方法，重写方法。（装饰器）（混入）
通过配置项extends来完成继承
parent.js

<template>
    <div>
        <h2>parent</h2>
        <h3>parent- msg </h3>
    </div>
</template>

<script>
export default 
    data()
        return 
            msg:"title"
        
    ,
    methods:
        run()
           console.log(this.msg);
        
       

</script>

son.js

<template>
    <div>
        <h2>son</h2>
        <h3>son-msg</h3>
        <button @click="run">点我输出msg信息</button>
    </div>
</template>

<script>
import parent from './parent.vue'
export default 
    extends:parent,

</script>

异步组件加载

之前所有的组件导入都为同步导入。
异步导入写法。

export default 
    name:"app",
    components:
        // key标签名：函数 =》此函数返回一个primse，而import就作为函数来使用是返回了一个promise
        child:()=>import('@/components/child.vue'),
        // 异步会分包传输app,那么就可以自定义这个分包的包名
        child:()=>import(/*webpackChunkName:'children'*/'@/components/child.vue'),
    ,

异步组件工厂

//这种写法就是然函数返回一个对象。
const AsyncComponent = () => (
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: import('./components/child.vue'),
    // 异步组件加载时使用的组件
    loading,
    // 加载失败时使用的组件
    // error: ErrorComponent,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 3000
)

components: 
    child:AsyncComponent,
    loading
,

组件插槽

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

单个插槽/默认插槽/匿名插槽

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。

<child>我是标题</child>
^^^^^^^^^^^^^^^^^^^^^^^^^
声明位置，用于在调用此组件为双标签时，中间内容显示的位置
单个插槽，一个组件只能有一个默认插槽
<slot name="default"></slot>
简写： <slot></slot>
写多个就是全部插入显示。
<slot>默认</slot>

具名插槽

有时我们需要多个插槽，来完成对应的数据自定义显示。
一个不带 name 的 出口会带有隐含的名字“default”。

具名插槽，给slot添加一个名称，名称不能重复
vue2.6之前的具名插槽，依次执行显示 都会显示
vue2.6之后的具名插槽，重复调用，只会执行最后1次

<slot name="header">默认头部</slot>

<child>
	<!-- vue2.6之前这样写 -->
	<div slot="handler">我是标题</div>
	
	<!-- vue2.6之后这样写 -->
	<template v-slot:handler>
		<div>我是标题</div>
	</template>
	
	<template #handler>简写
		<div>我是标题</div>
	</template>
</child>

作用域插槽

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的)可重用模板，来代替已经渲染好的元素。在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样
。

2.6只前的写法：
<button slot="del" @click="del(index)" slot-scope="index">删除</button>

2.6之后的写法：
<template #del="index">
    <button @click="del(index)">删除</button>
</template>

<div>
    <h1>app组件</h1>
    <hr>
    <child :users="users">
        <template #del="index">
            <button @click="del(index)">删除</button>
        </template>
    </child>
</div>

让插槽传参 作用域插槽 给插槽一个动态属性

<div>
    <h2>child组件</h2>
    <hr>
    <ul>
        <li v-for="(item,index) in users" :key="item.id">
            <span>item.name</span>
            <!-- 让插槽传参 作用域插槽 给插槽一个动态属性-->
            <slot name="del" :index="index">
                <span @click="del(index)">删除</span>
            </slot>
        </li>
    </ul>
</div>

插槽被替换后，所执行和修改的数据源对象也会发生改变。
那么执行的事件也就是替换的插件对象所在的数据源。
传递参数过去之后，会以属性名为key,属性值为value组合成一个对象。

动态插槽

以后补。

以上是关于js怎么异步加载loading的主要内容，如果未能解决你的问题，请参考以下文章

requireJS异步加载

浏览器调试工具怎么调试异步加载的js

jQuery Ajax

Vue-七七创建全局组件——“Loading“ 使用extend创建组件——弹出层 单继承：vue组件间的继承。——继承js的部分 异步组件加载 异步组件工厂 组件插槽

SoundPool.load() 是不是设计为异步加载？

怎么异步显示加载中 winform