H5 lazy loading and multimedia autoplay step pit

Lazy loading

In the past

When it comes to website optimization, we will think of lazy loading strategy. Think about how lazy loading used to be to monitor the Scroll event of elements, and then load when the target element is judged to enter the visible area. Because of the occurrence of scroll events, it is easy to cause performance problems

now

There is a new IntersectionObserver API that can automatically “observe” whether elements are visible, and Chrome 51+ already supports it. Because the nature of visible is that a target element intersects with the viewport, the API is called a “intersecting viewer.”

scenario

Lazy loading of images

Just make sure the image is in the viewable area and assign to load the image. Once the assignment is complete, stop listening for the image

<img class="lazyloadImg" :data-src="require('.. /assets/1.jpg')" />
Copy the code

const imgs = document.querySelectorAll('img.lazyloadImg');
    const observer = new IntersectionObserver((nodes) = > {
      nodes.forEach((v) = > {
        if (v.isIntersecting) {
          const target = v.target asHTMLImageElement; target.src = target.dataset.src; observer.unobserve(v.target); }}); });Copy the code

rendering

Long list lazy loading

Deploy a placeholder element at the bottom of the list without any height or physical appearance and ask the interface to load the data simply by confirming that the placeholder element is in the viewable area

<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
  <li>li4</li>
  <li>li5</li>
</ul>
<div id="bottom"></div>
Copy the code

const bottom = document.getElementById('bottom');
    const observerDiv = new IntersectionObserver((nodes) = > {
      const target = nodes[0];
      if (target.isIntersecting) {
        console.log('Bottom, request interface');
        const li = document.createElement('li');
        li.innerHTML = 'I'm a newly loaded LI tag';
        document.getElementsByTagName('UL') [0].appendChild(li); }}); observerDiv.observe(bottom);Copy the code

rendering

Multimedia autoplay

prospects

I first received a request to have an audio file play automatically as background music when opening a page.

In the pit

At first, I thought this requirement was too simple. I just added autoplay to the < Audio > tag, but when I tested it on my iPhone, I found that neither wechat browser nor Safari automatically played

scenario

Later, I checked the data and found that in order to provide users with better media playing experience and not to waste user traffic blindly, most mobile browsers clearly stipulated that they could not automatically play media or blocked autoplay by default. In order to make media play automatically after page loading, they could only display play

<audio id="audio" controls loop autoplay="true" :src="musicSrc" />
Copy the code

Wechat browser

It is necessary to register the event of wechat browser SDK and perform automatic playback

/ / individual treatment WeChat built-in browser automatically play the document. The addEventListener (' WeixinJSBridgeReady '() = > {audio. The play (); }, false );Copy the code

safari

In the Apple system, media can be played only after user interaction starts. If there is no response from the user, The media will be automatically blocked by Safari. Therefore, you need to listen for the user’s first touch and trigger automatic media playback

document.body.addEventListener('touchstart', () => {
  audio.play();
});
Copy the code