请问大神们,什么时候让骨架屏消失,怎么判断?

2020-03-24 11:51发布

请问大神们,我们公司的小程序有骨架屏功能,骨架屏我找到插件实现了,插件里有个关闭骨架屏的代码,但我不知道什么时候调用关闭骨架屏的代码啊,想不出来,怎么判断所有图片都加载完毕啊,能用代码举个列子吗

请问大神们,我们公司的小程序有骨架屏功能,骨架屏我找到插件实现了,插件里有个关闭骨架屏的代码,但我不知道什么时候调用关闭骨架屏的代码啊,想不出来,怎么判断所有图片都加载完毕啊,能用代码举个列子吗


1条回答
星期八
1楼 · 2020-04-10 10:01.采纳回答


可以使用promise的方式实现,思路就是为每个资源绑定load事件,每个资源load执行代表资源加载成功,当都加载完毕,也就是当存储长度变量等于资源长度以后,代表所有资源加载成功,此时可关闭。

const resourcesList = [
    '1.png',
    '2.png',
    '3.png',
    '4.png',
    '5.png',
    '6.png',
    '7.png'
]
function loadSources() {
    let resource = null
    let loadCount = 0
     new Promise((resolve,reject)=>{
            resourcesList.forEach((sourceName)=>{
                if( sourceName.endsWith('.png') ){
                    resource = new Image()
                    resource.src = `images/${sourceName}`
                    databus.resources.images[sourceName.slice(0,-4)] = resource
                }
                resource.addEventListener('load',()=>{
                    loadCount++;
                    if(loadCount === resourcesList.length){ //代表所有资源加载成功,可关闭骨架屏
                        resolve();
                        //console.log( loadCount )
                    }
                })
            })
    })
}


相关问题推荐

  • 回答 40

    常简单的API,掌握js和css就够了。确实适合快速开发常见的简单需求,但复杂需求看起来还是很难实现的。说是前端开发有优势,其实没那么明显,后端开发者也很容易上手

  • 小程序如何推广?2020-12-11 06:56
    回答 26

    1、附近的小程序商家通过附近的小程序功能提高商家小程序的曝光度,用户可以非常直观地在小程序界面查看门店商家的地理位置、门店信息、联系电话、经营时间等信息。2、微信搜索入口目前小程序支持通过搜索找到小程序。用户可以通过对小程序的名称、功能等关键...

  • 回答 18

    it行业薪资高吸引人,你可以去做专业的职业培训,选择小白相对于比较好入行板块去学习,或者按自己的兴趣来,最主要还是自己得努力认真学

  • 回答 17

    优势1、小程序开发成本比较低,适合于试错2、小程序流量获取比较容易,成本低,可以快速验证需求3、轻量化,主张用完即走;4、推广上,小程序比app好推;5、相结合可以会达到优势最大化。就像拼多多,有自己的App,但也有自己的小程序。劣势1、微信限制太多,...

  • 小程序好学吗?2020-03-10 17:48
    回答 14
    已采纳

    在学习小程序开发之前,大家需要有Web前端开发经验或是具有JavaScript语言基础。然后才能进一步学习小程序基础知识,如配置、样式、组件、生命周期等等知识技能,学习的重点还包括了微信小程序的各类组件和数据渲染使用方法。要想真正学好小程序开发,还需要...

  • 回答 14

    1、安装 computed;2、作为 behavior 引入;3、把 Page({}) 修改为 Component({});4、把基础版本库改到2.61 以上,详情-> 本地设置 -> 基础版本库;5、然后就可以愉快的使用computed属性了,使用方法和组件Component 组件用法一致;6、computed 属性只能计算一层...

  • 小程序会替代APP吗?2020-05-22 09:32
    回答 11

    小程序和APP各有特色,并不能取代APP,它们适用于不同需求的客户。我们可以看出,对于功能比较简单,中小型的APP,小程序基本可以作为替代品,但如果是一些功能繁多的APP,小程序还无法实现个性化定制。从命名的小程序就可以看出,它强调的是小,无法取代大型...

  • pwa会替代原生app吗2021-01-17 00:04
    回答 10

    个人认为无法代替,毕竟有些无法替代的功能。他的很多优点其实各类小程序也都具备,而且小程序还能基于平台,带来很多流量。

  • 回答 8

           就是如何把radio改成2个1打开微信小程序开发工具,打开已新建的或新建一个项目2新建一个页面文件wxml,插入一个radio-group,然后内嵌四个radio3保存代码并查看左侧模拟器,可以查看到一组单选按钮4在对应页面的JS文件中,定义单选按钮组change事...

  • 回答 2

    一、首先找到第一次发起网络请求的地址,将服务器返回set-cookie当全局变量存储起来wx.request({   ......   success: function(res) {     console.log(res.header);     //set-cookie:PHPSESSID=ic4vj84aaavqgb800k82etisu0; path=/; domai...

  • 回答 5

    一、 准备1.在新建的项目,在pages同级文件夹,创建一个components文件夹,(文件夹位置随意,也可在pages中,使用时正确导入位置信息就OK了),用来放我们所有的自定义组件.(component意思为组件)2.在components文件夹下创建文件夹用来存放组件(文件夹名字...

  • 回答 7

    需求,商品详情结算提交订单后,可更改默认收货地址,在收货地址修改后,返回提交订单页,且刷新订单页的地址基础数据问题:选择收货地址返回后,从详情页传递的商品id以及商品数量都取不到了。// 获取当前小程序的页面栈    let pages = getCurrentPages()...

没有解决我的问题,去提问