uniapp 지연 로딩이 적용되지 않습니다

모바일 인터넷의 발전과 대중화로 인해 점점 더 많은 사람들이 모바일 개발을 위해 uniapp을 사용하고 있습니다. uniapp 개발에서 지연 로딩은 페이지 로딩 속도를 최적화하고 사용자 경험을 향상시키는 데 도움이 되는 매우 중요한 기술입니다. 그러나 때로는 지연 로딩이 적용되지 않는 경우가 있습니다. 이 문서에서는 이 문제에 대해 설명합니다.

1. 유니앱 지연 로딩이란 무엇인가요?

지연 로딩은 페이지가 스크롤될 때 이미지나 기타 미디어 리소스를 동적으로 로드하는 최적화 전략입니다. 이러한 리소스는 가시 범위에 들어갈 때만 실제로 로드되므로 처음으로 로드되는 리소스의 양이 줄어들고 로딩 속도가 빨라집니다. 프로세스.페이지 로딩 속도. uniapp에서는 지연 로드 속성을 설정하거나 uni.loadImage 인터페이스를 사용하여 지연 로딩을 구현할 수 있습니다.

2. uniapp 지연 로딩이 실패하는 이유는 무엇입니까?

uniapp에서 지연 로딩을 사용했지만 적용되지 않는 경우 가능한 이유는 다음과 같습니다.

1. 컨테이너 요소에 높이가 설정되어 있지 않습니다.

컨테이너 요소(예: div)에서 지연 로딩을 사용하는 경우 ), 컨테이너 요소에는 고정된 높이가 있어야 합니다. 그렇지 않으면 브라우저는 객체가 가시 영역 내에 있는지 여부를 확인할 수 없습니다. 따라서 컨테이너 요소가 높이를 설정하지 않으면 지연 로딩이 실패합니다.

예를 들어 다음 코드를 사용하세요.

<div style="height:1000px;">
  <img src="/static/img.jpg" lazy-load />
</div>

이 예에서 컨테이너 요소 div에는 고정 높이가 있지만 그림 요소에는 너비와 높이가 없습니다. 컨테이너 요소가 동적으로 로드되면 컨테이너 데이터가 로드된 후 높이를 다시 계산해야 한다는 점에 유의해야 합니다.

2. IntersectionObserver의 관찰 범위 설정

IntersectionObserver는 요소의 지연 로딩을 구현할 수 있는 새로운 API이지만, IntersectionObserver 설정 시 관찰 범위(루트)를 지정하면 지연 로딩이 실패합니다. .

예를 들어 다음 코드를 사용하세요.

<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>

이 예에서는 IntersectionObserver의 루트 매개변수를 설정하여 관찰 범위를 지정하므로 관찰된 요소가 가시 영역에 들어갈 때 지연 로드 콜백 함수가 실행됩니다. 루트 매개변수가 설정되지 않은 경우 뷰포트는 기본적으로 관찰 범위가 됩니다.

3. 이미지가 캐시되었습니다

브라우저에서 이미지를 캐시하면, 표시 영역에 있든 없든 브라우저가 이미지 리소스를 직접 검색하기 때문에 이미지 리소스를 다시 요청하지 않습니다. 캐시에서. 따라서 이 경우 지연 로딩도 실패합니다.

3. 유니앱의 지연 로딩 실패 문제를 해결하는 방법은 무엇인가요?

1. uni.loadImage 인터페이스를 사용하세요

uni.loadImage는 uniapp에서 제공하는 이미지 로딩 인터페이스로 지연 로딩을 구현할 수 있습니다. 모든 이미지를 로드할 필요 없이 필요할 때 이미지를 동적으로 로드할 수 있다는 것이 특징입니다. 이 인터페이스를 사용하면 LazyLoad 실패와 관련된 많은 문제를 해결할 수 있습니다. uni.loadImage 사용에 대해서는 공식 문서에 자세한 소개가 있으므로 여기서는 자세히 다루지 않겠습니다.

2. IntersectionObserver 사용

IntersectionObserver를 사용하여 요소의 지연 로딩을 구현하려는 경우 루트 요소(루트)를 비어 있거나 뷰포트로 설정하는 것을 고려할 수 있습니다. 이런 방식으로 관찰 범위 문제로 인해 지연 로딩이 실패하지 않습니다.

예를 들어 다음 코드는

<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>

이 예제에서는 관찰 범위(루트)를 지정하지 않았기 때문에 관찰 범위가 기본적으로 뷰포트로 설정되어 지연 로딩이 성공할 수 있습니다.

3. 이미지의 너비, 높이, 높이를 설정하세요

이미지의 너비, 높이, 높이가 올바르게 설정되면 지연 로딩 효과가 더 좋아집니다. 브라우저는 이미지의 크기를 결정할 수 있으므로 이미지가 볼 수 있는 영역 내에 있는지 여부를 더 잘 판단할 수 있습니다. 따라서 지연 로딩을 사용할 때에는 이미지의 너비와 높이를 동시에 설정해야 합니다.

예를 들어 다음 코드를 사용하세요.

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

이 예에서는 이미지 요소의 너비와 높이를 설정하여 브라우저가 이미지 요소가 가시 영역 내에 있는지 더 정확하게 확인할 수 있습니다.

요약:

지연 로딩은 모바일 개발에 필수적인 기술로, 페이지 로딩 속도와 사용자 경험을 향상시킬 수 있습니다. uniapp에서 지연 로딩을 구현하는 방법은 여러 가지가 있지만 때로는 지연 로딩이 실패하는 경우도 있습니다. 이 기사에서는 LazyLoad 실패의 세 가지 이유와 이러한 문제를 해결하는 방법을 소개합니다. 이것이 모든 사람이 지연 로딩 기술을 더 잘 활용하는 데 도움이 되기를 바랍니다.

위 내용은 uniapp 지연 로딩이 적용되지 않습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!