fix: lazy loading on iOS

arkntools · Apr 17, 2024 · 1d4feea · 1d4feea
1 parent 89418de
commit 1d4feea
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/DataImg.vue b/src/components/DataImg.vue
@@ -2,7 +2,7 @@
  <img
  :src="imgSrc"
  :style="imgStyle"
- :loading="lazy ? 'lazy' : undefined"
+ :loading="loading"
  crossorigin="anonymous"
  @error="isError = true"
  />
@@ -13,6 +13,7 @@ import { defineComponent } from 'vue';
 import { mapState } from 'pinia';
 import { useHotUpdateStore } from '@/store/hotUpdate';
 import { PNG1P } from '@/utils/constant';
+import { IS_IOS } from '@/utils/env';
 
 const defaultErrorStyle = {
  backgroundColor: '#bdbdbd',
@@ -45,6 +46,10 @@ export default defineComponent({
  if (!this.isError) return;
  return this.errorStyle === true ? defaultErrorStyle : this.errorStyle;
  },
+ loading() {
+ // iOS PWA image lazy loading failed bug
+ return !IS_IOS && this.lazy ? 'lazy' : undefined;
+ },
  },
  methods: {
  handleError(e) {

diff --git a/src/utils/env.js b/src/utils/env.js
@@ -1,3 +1,5 @@
 export const IS_DEV = process.env.NODE_ENV === 'development';
 
-export const IS_MOBILE = /Mobile|Android|webOS|iPhone|iPad|Phone/i.test(navigator.userAgent);
+export const IS_MOBILE = /Mobile|Android|Phone|iPad|webOS/.test(navigator.userAgent);
+
+export const IS_IOS = /iPhone|iPad/.test(navigator.userAgent);