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.
MarkBind · Sep 10, 2023 · b342e57 · b342e57
1 parent 4dd8d72
commit b342e57
Show file tree

Hide file tree

Showing 4 changed files with 0 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {