微信 html自动加载js,微信小程序实现图片预加载组件
网页中的图片预加载
图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下
var image = new Image()
image.onload = function() {
console.log('图片加载完成')
}
image.src = 'http://misc.360buyimg.com/lib/img/e/logo-201305.png'
下面推荐几篇网页中实现图片预加载的文章:
然而在微信小程序(以下简称小程序)里要实现图片的预加载要更麻烦一些,因为小程序里并没有提供类似 Image 这样的 JS 对象。。
小程序必知必会
在进入正题前,需要了解以下小程序相关的知识(当然最好还是完整的学习一下官方文档):
小程序框架的核心是一个响应的数据绑定系统,整个系统分为视图层和逻辑层两块,视图层即页面模板(后缀为 .wxml 的文件),逻辑层即页面 JS 文件
小程序的页面模板由一系列的基础组件组合而成,如 view、text、button 等
页面内容的更新基于数据的单向绑定来进行,通过 JS 调用 Page 对象的 setData 方法来更新模板中绑定的数据
视图层到逻辑层的通信是通过事件完成的,在组件中声明事件的回调,JS 端可监听到界面交互的发生、组件状态的变化等
在 WXML 文件中,可通过 template 进行模板的复用,若 template 是在不同文件里定义的,需要先通过 import 语句进行引入
这里有个官方的简单例子可以用来帮助理解
Hello {{name}}!
Click me!
//脚本文件 foo.js
Page({
data: {
name: 'WeChat'
},
changeName: function(e) {
this.setData({
name: 'MINA'
})
}
})
运行这个页面会看到一行 Hello WeChat! 的文字及一个按钮,点击按钮后文字会变成 Hello MINA!
在小程序中加载图片
小程序提供一个 image 组件(类似于 HTML 中的 img 标签),可以设置 src 及加载成功或失败的回调,使用起来很简单
//脚本文件 bar.js
Page({
imageOnLoad(ev) {
console.log(`图片加载成功,width: ${ev.detail.width}; height: ${ev.detail.height}`)
},
imageOnLoadError() {
console.log('图片加载失败')
}
})
运行以上代码,顺利的话页面上会显示出一张图片,同时控制台会打印出带图片宽高的日志信息
将功能抽离成公用组件
接下来我们考虑实现这么一个功能,在页面上载入一张尺寸和 K 数都很大的图片,由于图片很大,下载需要一定的时间,而在这段时间内,用户看到的是空白或是不完整的图片,体验显然不好。
一种常用的优化手段是先加载一张缩略图,该缩略图通过样式设置为和原图一样的宽高,这样用户首先能很快速地看到一张模糊的图片,此时再去对原图做预加载,加载完成之后对缩略图进行替换,因为此时图片已经下载过了,所以界面上能无缝地切换为原图显示,效果如下:
单张图片预加载
完成这个优化操作的关键就在于需要一个公共的图片预加载组件的支持,接下来我们分步骤来看看如何实现
新建 demo 页面及组件相关的文件 img-loader.js 和 img-loader.wxml,组件需要和页面一样有个模板文件,是因为小程序里无法动态地插入模板结构。然后在 demo.wxml 里通过 import 语句引用组件模板,在 demo.js 里通过 require 语句将组件脚本进行引入
在页面中通过 template 调用组件模板并传入数据,这里我们传递一个名为 imgLoadList 的图片数组过去
在页面脚本中的 onLoad 方法中对组件进行初始化,并将 this 对象传入,因为组件内必须通过 Page 对象的 setData 来更新模板里的内容
在组件的 img-loader.js 中定义一个 load 方法用来创建一个图片的加载,将传入的 src 添加到加载队列中,并使用 setData 方法更新队列数据
接下来在组件 img-loader.wxml 中通过接收到的图片队列数据,用 wx:for 指令去生成 image 组件来对图片进行加载,同时将成功及失败的回调绑定到 img-loader.js 中的方法中,最终再回调回 Page 对象中
可以看出,由于小程序里无法动态地插入模板结构,所以相对于普通网页端的组件调用,这里多出了在 WXML 文件中引入及使用模板这个步骤,而其他部分对于调用方(即Demo 页面)来说则是相似的,下面是完整的 Demo 页面的代码
Click To Load Image
{{ msg }}
// ------ demo.js ------
//引入图片预加载组件
const ImgLoader = require('../../img-loader/img-loader.js')
//缩略图 80x50 3KB
const imgUrlThumbnail = 'http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg'
//原图 3200x2000 1.6MB
const imgUrlOriginal = 'http://storage.360buyimg.com/mtd/home/lion1483624894660.jpg'
Page({
data: {
msg: '',
imgUrl: ''
},
onLoad() {
//初始化图片预加载组件
this.imgLoader = new ImgLoader(this)
},
loadImage() {
//加载缩略图
this.setData({
msg: '大图正拼命加载..',
imgUrl: imgUrlThumbnail
})
//同时对原图进行预加载,加载成功后再替换
this.imgLoader.load(imgUrlOriginal, (err, data) => {
console.log('图片加载完成', err, data.src)
this.setData({ msg: '大图加载完成~' })
if (!err)
this.setData({ imgUrl: data.src })
})
}
})
如果把图片加载完成的回调统一指定成 Page 对象中的方法,则可以很方便地处理多张图片的加载,这里也写了个例子,效果如下:
多张图片预加载
总的来说调用起来还算方便吧,img-loader 的组件代码略多这里就不贴出来啦,有兴趣的同学可以前往 Github 项目页面查看,目前此组件已应用在京东购物小程序版中。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
微信 html自动加载js,微信小程序实现图片预加载组件相关推荐
- 小程序实现图片预加载(图片延迟加载)
这几天搞百度小程序,对接的网站需要展示大量图片,并且图片都是高清图片,因为要同步支持pc和手机站,在开发者工具中测试的时候,图片都是瞬间加载,因此感觉不出什么,但是真机预览的时候,特别是4G情况下,会 ...
- 微信小程序image图片预览时不显示(后缀问题!)
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
- 微信小程序实现图片预览功能
小程序有提供预览图片的wx.previewImage方法 先在页面上放上图片标签 <imagecatch:tap="preview"data-src = 'https://s ...
- 微信小程序分包和预加载分包
前言 略 分包 配置方法:app.json 文件 {"pages": ["pages/index/index",...],"subpackages&q ...
- 微信小程序之图片懒加载
数据都是死的,复制即可查看效果 实现原理: 通过onPageScroll() 方法返回的e.scrollTop值与手机窗口宽高进行计算,较完美的解决了等高或均高图片序列的图片懒加载. 关于图片高度:图 ...
- 小程序本地图片偶尔加载不出来_小程序优化的20中策略
体验评分是一项给小程序的体验好坏打分的功能,它会在小程序运行过程中实时检查,分析出一些可能导致体验不好的地方,并且定位出哪里有问题,以及给出一些优化建议. 使用流程: 1.打开开发者工具,在详情里切换 ...
- 小程序之图片懒加载[完美方案,你不来看看?]
效果图 既然来了,把妹子都给你. 定义 懒加载,前端人都知道的一种性能优化方式,简单的来说,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 实现原理 监 ...
- 小程序自定义图片预览和多图下载的实现
小程序开发中图片列表的需求再常见不过了,通常都会配合大图预览和图片下载的功能 但是微信又没有提供可自定义的图片预览功能,有时候会有需求在预览大图的时候收藏或者下载啥的用 wx.previewImage ...
- 微信小程序实现图片预览的功能
我们大概 是见过,当我们点击的图片的时候,图片会放大,然后可以左右切换查看图片 其实吧这个功能还是挺常见的 今天来说说在微信小程中实现这个功能 // index.wxml 中引入了一个图片 然后 绑定 ...
最新文章
- 变压器、稳压模块功率
- linux命令grpck,不可不知的的grpck命令【每日一个知识点第184期-Linux】
- rabbitmq简单收发服务搭建
- K8S报错:controller-manager Unhealthy Get http://127.0.0.1:10252/healthz: dial tcp 127.0.0.1:10252
- Linux下定时器使用
- php require persion denied,php,nginx_php+nginx配置权限问题(13: Permission denied),php,nginx - phpStudy...
- bzoj 2660: [Beijing wc2012]最多的方案
- 微软开放技术发布开源 Jenkins 插件以将 Windows Azure Blob 服务用的开作存储库
- 布局智能家居 三大电信运营商进展如何?
- POJ NOI MATH-7651 自来水供给
- Miller Rabin算法:大质数判断
- 数据库设计时设计标识字段的一些思考
- Wpf ScrollBar自定义样式
- matlab 读取同一文件中所有图像_matlab 批量读取文件夹内所有图片的几种方法
- python实现mysql数据导入HBase
- python入门教程(非常详细),从零基础入门到精通,看完这一篇就够了
- Matlab2018a破解出现licensing error:-8523
- Ubuntu18.04下隐藏桌面硬盘图标
- 又是一个想当然的错误
- 百度视频在Android和iOS端性能测试方法
热门文章
- SSL-ZYC 牛车
- Wavel Sequence HDU - 6078 (dp)
- Java 在线编辑 Excel
- 625线,525线什么意思?
- java获取微信token_Java微信公众平台开发(六)--微信开发中的token获取
- 构建自定义安全令牌服务
- 《统计学习方法》学习笔记(4)--k近邻法及常用的距离(or 相似度)度量
- 利用Nodemcu+Arduino nano+TB6612+点灯科技APP制作简易麦克纳姆轮Wi-Fi遥控小车
- Android增强现实(三)-3D模型展示器
- 什么是人工智能?人工智能如何系统的学习