uniapp lazy loading does not take effect

With the development and popularity of mobile Internet, more and more people choose to use uniapp for mobile development. In the development of uniapp, lazy loading is a very important technology, which can help us optimize page loading speed and improve user experience. However, sometimes we find that lazy loading does not take effect. This article will discuss this issue.

1. What is uniapp lazy loading?

Lazy loading is an optimization strategy that dynamically loads images or other media resources as the page scrolls. These resources are only actually loaded when they enter the visible range, thereby reducing the time required for the first load. resources to speed up page loading. In uniapp, we can implement lazy loading by setting the lazy-load attribute or using the uni.loadImage interface.

2. Why does uniapp lazy loading fail?

If you use lazy loading in uniapp but it does not take effect, here are some possible reasons:

1. The height of the container element is not set

In the container element ( For example, when lazy loading is used in div), the container element must have a fixed height, otherwise the browser cannot determine whether the object is within the visible area. Therefore, if the container element does not set a height, lazy loading will fail.

For example, the following code:

<div style="height:1000px;">
  <img  src="/static/imghwm/default1.png"  data-src="/static/img.jpg"  class="lazy" lazy-load / alt="uniapp lazy loading does not take effect" >
</div>

In this example, the container element div has a fixed height, but the picture element has no width and height. It should be noted that when the container element is loaded dynamically, the height should be recalculated after the container data is loaded.

2. Set the observation scope of IntersectionObserver

IntersectionObserver is a new API that can implement lazy loading of elements, but it has an observation scope (root). If we set IntersectionObserver If the observation range is specified, lazy loading will fail.

For example, the following code:

<view>
  <image src="/static/img.jpg" root="{{root}}" lazy-load />
</view>

<script>
export default {
  data () {
    return {
      root: '#my-root'
    }
  },
  mounted () {
    const observer = uni.createIntersectionObserver().relativeToViewport({
      bottom: 50
    })
    observer.observe('.lazy-load', () => {
      console.log('image lazy load')
    })
  }
}
</script>

In this example, we specify the observation range by setting the root parameter of IntersectionObserver, so when the observed element enters the visible area, it will Execute the callback function of lazy-load. If the root parameter is not set, the viewport will be the observation scope by default.

3. The image has been cached

When the image is cached by the browser, regardless of whether it is in the visible area, the image resource will not be requested again, because the browser will directly Get image resources from cache. So in this case, lazy loading will also fail.

3. How to solve the problem of lazy loading failure of uniapp?

1. Use the uni.loadImage interface

uni.loadImage is the image loading interface provided by uniapp, which can implement lazy loading. Its feature is that it can dynamically load images when needed without having to load all images. Using this interface can solve many problems of LazyLoad failure. Regarding the use of uni.loadImage, there is a detailed introduction in the official documentation, so I will not go into details here.

2. Use IntersectionObserver

If you want to use IntersectionObserver to implement lazy loading of elements, then you can consider setting the root element (root) to empty or viewport. In this way, lazy loading will not fail due to observation range issues.

For example, the following code:

<view>
  <image src="/static/img.jpg" lazy-load />
</view>

<script>
export default {
  mounted () {
    const observer = uni.createIntersectionObserver().relativeToViewport({
      bottom: 50
    })
    observer.observe('.lazy-load', () => {
      console.log('image lazy load')
    })
  }
}
</script>

In this example, we did not specify the observation range (root), so its observation range defaults to viewport, so that lazy loading can be successful .

3. Set the width, height and height of the image

When the width, height and height of the image are set correctly, the effect of lazy loading will be better. Because the browser can determine the size of the image, it can better determine whether the image is within the viewable area. Therefore, when using lazy loading, you should set the width and height of the image at the same time.

For example, the following code:

<view>
  <image src="/static/img.jpg" style="width:100%;height:300px;" lazy-load />
</view>

In this example, we set the width and height of the image element so that the browser can more accurately determine whether it is within the visible area .

Summary:

Lazy loading is an essential technology in mobile development, which can improve the loading speed and user experience of the page. There are many ways to implement lazy loading in uniapp, but sometimes lazy loading fails. This article introduces three possible reasons for LazyLoad failure and how to solve these problems. I hope it can help everyone make better use of lazy loading technology.

The above is the detailed content of uniapp lazy loading does not take effect. For more information, please follow other related articles on the PHP Chinese website!