H5懒加载和多媒体自动播放踩坑

兔子公主

2021年02月20日 17:16

懒加载

过去

提到网站优化的时候是不是就会想到懒加载策略，想想我们过去做懒加载都是监听元素的scroll事件，当判断目标元素进入可视区域的时候再做加载，由于scroll事件密集发生，容易造成性能问题

现在

目前有一个新的 IntersectionObserver API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。

场景

图片懒加载

只需确认图片进入可视区域就赋值加载图片，赋值完成还需对图片停止监听

<img class="lazyloadImg" :data-src="require('../assets/1.jpg')" />
复制代码

const imgs = document.querySelectorAll('img.lazyloadImg');
    const observer = new IntersectionObserver((nodes) => {
      nodes.forEach((v) => {
        if (v.isIntersecting) {
          const target = v.target as HTMLImageElement;
          target.src = target.dataset.src;
          observer.unobserve(v.target);
        }
      });
 });
复制代码

效果图

长列表懒加载

在列表最底部部署一个占位元素且该元素无任何高度或实体外观，只需确认占位元素进入可视区域就请求接口加载数据

<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
  <li>li4</li>
  <li>li5</li>
</ul>
<div id="bottom"></div>
复制代码

const bottom = document.getElementById('bottom');
    const observerDiv = new IntersectionObserver((nodes) => {
      const target = nodes[0];
      if (target.isIntersecting) {
        console.log('已到底部，请求接口');
        const li = document.createElement('li');
        li.innerHTML = '我是新加载的li标签';
        document.getElementsByTagName('UL')[0].appendChild(li);
      }
    });
observerDiv.observe(bottom);
复制代码

效果图

多媒体自动播放

前景

初次接到一个需求：打开某个页面的时候，让一个音频文件作为背景音乐自动播放。

遇坑

最开始觉得这个需求也太简单了，在<audio> 标签上加上autoplay不就行了，殊不知拿起自己的iphone测试，发现在微信浏览器和safari中都没有自动播放

场景

后来查了资料，发现浏览器为了让用户得到更好的媒体播放体验与不盲目浪费用户流量，大部分移动端浏览器都明确规定不能自动播放媒体或默认屏蔽autoplay，为了让媒体在页面加载完后自动播放，只能显示播放

<audio id="audio" controls loop autoplay="true" :src="musicSrc" />
复制代码

微信浏览器

需要实现微信浏览器SDK的事件注册，并执行自动播放

// 单独处理微信内置浏览器自动播放
    document.addEventListener(
      'WeixinJSBridgeReady',
      () => {
        audio.play();
      },
      false
    );
复制代码

safari

在苹果系统上明确规定用户交互操作开始后才能播放媒体，未得到用户响应会被Safari自动拦截，因此需监听用户首次触摸操作并触发媒体自动播放

document.body.addEventListener('touchstart', () => {
  audio.play();
});
复制代码