From b342e5760d7e91f3061e18de41051ecfd5ae3496 Mon Sep 17 00:00:00 2001
From: James <87931905+jmestxr@users.noreply.github.com>
Date: Sun, 10 Sep 2023 23:05:45 +0800
Subject: [PATCH] Remove option to lazy-load images (#2365)

Remove option to lazy-load images

Lazy-loading option is introduced through the 'eager' prop in and components.

Images are loaded as scrolling occurs, resulting in inaccurate scrolling as seen in issue #2364.

Let's remove 'eager' prop from and components

All images are now loaded eagerly.
---
 docs/userGuide/syntax/annotations.md                 | 1 -
 docs/userGuide/syntax/pictures.md                    | 5 -----
 packages/vue-components/src/Pic.vue                  | 8 --------
 packages/vue-components/src/annotations/Annotate.vue | 8 --------
 4 files changed, 22 deletions(-)

diff --git a/docs/userGuide/syntax/annotations.md b/docs/userGuide/syntax/annotations.md
index 8011de1451..78aaa92c88 100644
--- a/docs/userGuide/syntax/annotations.md
+++ b/docs/userGuide/syntax/annotations.md
@@ -145,7 +145,6 @@ This is effectively the same as the options used for the [picture](#pictures) co
 | src    | `string`  |         | **This must be specified.**<br>The URL of the image.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_ |
 | height | `string`  |`''`| The height of the image in pixels.                                                                                                                                                                                    |
 | width  | `string`  |`''`| The width of the image in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.                                                            |
-| eager  | `boolean` | false   | The `<pic>` component lazy loads its images by default.<br>If you want to eagerly load the images, simply specify this attribute.                                                                                     |
 
 </div>
 
diff --git a/docs/userGuide/syntax/pictures.md b/docs/userGuide/syntax/pictures.md
index f40fada482..22ed0fddaf 100644
--- a/docs/userGuide/syntax/pictures.md
+++ b/docs/userGuide/syntax/pictures.md
@@ -8,10 +8,6 @@
 <pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
   MarkBind Logo
 </pic>
-
-<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo" eager>
-  MarkBind Logo
-</pic>
 </variable>
 </include>
 
@@ -22,7 +18,6 @@ alt | `string` | | **This must be specified.**<br>The alternative text of the im
 height | `string` | | The height of the image in pixels.
 src | `string` | | **This must be specified.**<br>The URL of the image.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
 width | `string` | | The width of the image in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.
-eager | `boolean` | false | The `<pic>` component lazy loads its images by default.<br>If you want to eagerly load the images, simply specify this attribute.
 
 <div id="short" class="d-none">
 
diff --git a/packages/vue-components/src/Pic.vue b/packages/vue-components/src/Pic.vue
index cab92c3656..2d17bba5a4 100644
--- a/packages/vue-components/src/Pic.vue
+++ b/packages/vue-components/src/Pic.vue
@@ -6,7 +6,6 @@
       :alt="alt"
       :width="computedWidth"
       class="img-fluid rounded"
-      :loading="computedLoadType"
       @load.once="computeWidth"
     />
     <span class="image-caption">
@@ -36,10 +35,6 @@ export default {
       type: String,
       default: '',
     },
-    eager: {
-      type: Boolean,
-      default: false,
-    },
     addClass: {
       type: String,
       default: '',
@@ -58,9 +53,6 @@ export default {
       }
       return this.widthFromHeight;
     },
-    computedLoadType() {
-      return this.eager ? 'eager' : 'lazy';
-    },
   },
   data() {
     return {
diff --git a/packages/vue-components/src/annotations/Annotate.vue b/packages/vue-components/src/annotations/Annotate.vue
index d44c7370d4..62235637c6 100644
--- a/packages/vue-components/src/annotations/Annotate.vue
+++ b/packages/vue-components/src/annotations/Annotate.vue
@@ -6,7 +6,6 @@
       :alt="alt"
       :width="computedWidth"
       class="annotate-image"
-      :loading="computedLoadType"
       @load.once="getWidth"
     />
     <div style="top: 0; left: 0; height: 0;">
@@ -36,10 +35,6 @@ export default {
       type: String,
       default: '',
     },
-    eager: {
-      type: Boolean,
-      default: false,
-    },
     addClass: {
       type: String,
       default: '',
@@ -58,9 +53,6 @@ export default {
       }
       return this.widthFromHeight;
     },
-    computedLoadType() {
-      return this.eager ? 'eager' : 'lazy';
-    },
   },
   data() {
     return {