Add optional parameter **[lazyLoadGalleryImages]** to turn off lazy l…

…oading when set to false and instead load all gallery images at once.

README.md

@@ -70,6 +70,7 @@ Additional optional parameter to support multiple galleries. Add it if you want
     [maxRowsPerPage]="100"
     (viewerChange)="yourNotificationFunction($event)"
     [includeViewer]="true"
+    [lazyLoadGalleryImages]="true"
 ></gallery>
 ```
 
@@ -81,6 +82,7 @@ All parameters are optional.
 * **[maxRowsPerPage]** maximum rows per gallery, this will add navigation arrows once the threshold is reached.
 * **[viewerChange]** event fires once the viewer component gets opened or closed.
 * **[includeViewer]** provides an option to manually place the viewer outside the default DOM structure. Defaults to true.
+* **[lazyLoadGalleryImages]** allows to disable lazy loading of gallery images. All images will be loaded at once when set to false. Defaults to true.
 
 ## Different use cases
 ### Fetching images from an external data source
@@ -99,6 +101,10 @@ If you experience any other issues, please raise an issue on GitHub.
 
 ## Changelog
 
+### 15.2.0
+
+* Adding optional parameter **[lazyLoadGalleryImages]** to turn off lazy loading when set to false and instead load all gallery images at once.
+
 ### 15.1.0
 
 * Adding optional parameter [includeViewer] to support use cases where viewer is placed outside the gallery component manually

projects/angular2-image-gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-image-gallery",
-  "version": "15.1.0",
+  "version": "15.2.0",
   "description": "Responsive Angular 15 image gallery",
   "repository": {
     "type": "git",

projects/angular2-image-gallery/src/lib/gallery/gallery.component.ts

@@ -42,17 +42,18 @@ export class GalleryComponent implements OnInit, OnDestroy, OnChanges {
   @Input('metadataUri') providedMetadataUri: string = undefined
   @Input('maxRowsPerPage') rowsPerPage: number = 200
   @Input('includeViewer') includeViewer = true
+  @Input('lazyLoadGalleryImages') lazyLoadGalleryImages = true
 
   @Output() viewerChange = new EventEmitter<boolean>()
 
   @ViewChild('galleryContainer', { static: true }) galleryContainer: ElementRef
   @ViewChildren('imageElement') imageElements: QueryList<any>
 
-  @HostListener('window:scroll', ['$event']) triggerCycle(event: any): void {
+  @HostListener('window:scroll', ['$event']) triggerCycle(_: any): void {
     this.loadImagesInsideView()
   }
 
-  @HostListener('window:resize', ['$event']) windowResize(event: any): void {
+  @HostListener('resize', ['$event']) windowResize(_: any): void {
     this.render()
   }
 
@@ -226,7 +227,7 @@ export class GalleryComponent implements OnInit, OnDestroy, OnChanges {
     this.images.forEach((image: ImageMetadata, index: number) => {
       const imageElements = this.imageElements.toArray()
 
-      if (this.isPaginationActive() || this.isScrolledIntoView(imageElements[index]?.nativeElement)) {
+      if (this.isPaginationActive() || this.isScrolledIntoView(imageElements[index]?.nativeElement) || !this.lazyLoadGalleryImages) {
         image['srcAfterFocus'] = image.resolutions[this.minimalQualityCategory].path
       }
     })

src/app/demo.component.html

@@ -24,6 +24,7 @@
   [flexImageSize]="flexImageSize"
   [maxRowsPerPage]="15"
   [galleryName]="galleryName"
-  [includeViewer]="false">
+  [includeViewer]="true"
+  [lazyLoadGalleryImages]="false">
 </gallery>
 <br /><br />