中高级前端必须注意的40条移动端H5坑位指南( 六 ) _H5

懒性加载的第二种使用场景：下拉加载。在列表最底部部署一个占位元素且该元素无任何高度或实体外观，只需确认占位元素进入可视区域就请求接口加载数据。
<ul><li></li></ul><div id="bottom"></div>复制代码const bottom = document.getElementById("bottom");const observer = new IntersectionObserver(nodes => {const tgt = nodes[0]; // 反正只有一个if (tgt.isIntersecting) {console.log("已到底部，请求接口");// 执行接口请求代码}})observer.observe(bottom);复制代码优化扫码识别通常移动端浏览器都会配备长按二维码图片识别链接的功能，但长按二维码可能无法识别或错误识别。二维码表面看上去是一张图片，可二维码生成方式却五花八门，二维码生成方式有以下三种。

使用<img>渲染
使用<svg>渲染
使用<canvas>渲染

从网易MTL的测试数据得知，大部分移动端浏览器只能识别<img>渲染的二维码，为了让全部移动端浏览器都能识别二维码，那只能使用<img>渲染二维码了。若使用SVG和Canvas的方式生成二维码，那就想方设法把二维码数据转换成Base64再赋值到<img>的src上。
一个页面可能存在多个二维码，若长按二维码只能识别最后一个，那只能控制每个页面只存在一个二维码。
自动播放媒体常见媒体元素包括音频<audio>和视频<video>，为了让用户得到更好的媒体播放体验与不盲目浪费用户流量，大部分移动端浏览器都明确规定不能自动播放媒体或默认屏蔽autoplay 。为了能让媒体在页面加载完成后自动播放，只能显式声明播放。

const audio = document.getElementById("audio");const video = document.getElementById("video");audio.play();video.play();复制代码

对于像微信浏览器这样的内置浏览器，还需监听其应用SDK加载完成才能触发上述代码，以保障WebView正常渲染。其他内置浏览器同理，在此不作过多介绍。
document.addEventListener("WeixinJSBridgeReady", () => {// 执行上述媒体自动播放代码});复制代码在苹果系统上明确规定用户交互操作开始后才能播放媒体，未得到用户响应会被Safari自动拦截，因此需监听用户首次触摸操作并触发媒体自动播放，而该监听仅此一次。
document.body.addEventListener("touchstart", () => {// 执行上述媒体自动播放代码}, { once: true });
作者：JowayYoung
链接：
https://juejin.cn/post/6921886428158754829
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。