jesusbotella / ngx-lazy-load-images Goto Github PK

how can i set default image ? thanks

I love this package and i use it regularly, but one big thing i don't like is, that with more latency between client and server, the client sometimes has to wait until the image is loaded.

I would appreciate if there would be a way to have an animation before it loads the images, or maybe load a low res image first.

When I install this script in a server / client environment I have this error:
ReferenceError: window is not defined

Are you sure the directive is compatible with angular 2? Because there's no Renderer2 in angular core 2nd version

Hi,

I've implemented the library and imported in my appModule as described in the readme. When I create a prod budle using ng build --prod the finale bundle size is double compared to the one without the library imported. It seems you are importing the entire Angular core again. Am I doing something wrong?
I'm currently using angular 7.0

thanks

I have tested last version on all browsers and is not showing images on Microsoft Edge.

this is my component (Parent).

<div *ngFor="let product of products" [ngClass]="layout ? 'product-container-' + layout + '-layout' : 'product-container-grid-layout'" lazy-load-images>
 <product-card
   class="product-card-layout"
   [ngClass]="layout ? 'product-' + layout + '-layout' : ''"
   [context]="layout"
   [product]="product">
 </product-card>
</div>

On product card component(Children):

<figure class="product-image-container">
  <a class="product-image-link image-link"
    [routerLink]="['/shop', 'p', product.slugTitle, product.id]"
    [queryParams]="getProductReferral()"
    (click)="onClickProduct(product.id)">
    <img class="product-image" [attr.data-src]="product.primary_image_ref | image:200:200" />
  </a>
</figure>

I'm trying to implement lazy loading using the code below.

<div class="off-business info-hover" lazy-load-images>
    <div class="like">
        <button class="btn btn-sm float-right mdi mdi-bookmark" (click)="likeBusi(item.id)">
            <i [className]="item.fav_likes?.length ? 'mdi mdi-heart liked' : 'mdi mdi-heart'"></i>
        </button>
    </div>
    <img src="/assets/images/placeholder.png" attr.data-src="{{item.header_image}}-thumb.png" (click)="openBusi(item.slug)">
    <div class="footer" (click)="openBusi(item.slug)">
        <div class="row">
            <h4 [innerHtml]="item.title"></h4>
        </div>
    </div>
</div>

This all works great on desktop but on IOS the images don't load properly as below (image purposely blurred), you can see only half the image loads sometimes it's just little bits and other times it loads fine.

However once you scroll past the image and then back it loads it properly.

I've tried loading the images normally using src and they work fine on mobile it's only when i apply lazy loading it does this. I've tested it on my IPhone 6 and also on an
Android Galaxy device both of which produced the same problem.

Any help would be greatly appreciated.

Hello I am using this version in my demo application and I am trying to use it in Angular 11 but I am getting an error described below
Error: node_modules/ngx-lazy-load-images/src/ngx-lazy-load-images.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (ngx-lazy-load-images) which declares LazyLoadImagesModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also, consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Since this repo is no longer being maintained Until this repo is updated I recommend trying https://github.com/tjoskar/ng-lazyload-image.

Can this lazy-load can be used to lazy load the content as it approaches the viewport ( when the size of the content very large ) Like this

Here is the error, How can I fix this

normal behavior would be that browser loads images once and then the request is cached and get loaded from the cache, with this module it doesn't happen, browser loads images always by making request to the server, for something like pagination if you move between pages it comes more obvious

Looks like it only need the following changes

  getAllImagesToLazyLoad(pageNode: HTMLElement) {
    return Array.from(
      pageNode.querySelectorAll(
        'img[data-src], [data-srcset], [data-background-src]'
      )
    );
  }

  onImageAppearsInViewport(image: any) {
    if (image.dataset.src) {
      this.renderer.setAttribute(image, 'src', image.dataset.src);
      this.renderer.removeAttribute(image, 'data-src');
    }

    if (image.dataset.srcset) {
      this.renderer.setAttribute(image, 'srcset', image.dataset.srcset);
      this.renderer.removeAttribute(image, 'data-srcset');
    }

    if (image.dataset.backgroundSrc) {
      this.renderer.setStyle(
        image,
        'background-image',
        `url(${image.dataset.backgroundSrc})`
      );
      this.renderer.removeAttribute(image, 'data-background-src');
    }

    // Stop observing the current target
    if (this.intersectionObserver) {
      this.intersectionObserver.unobserve(image);
    }
  }

Happy to do a pull request if needed.

When running server side, this library does not load images. As a workaround, I'm writing a directive to load them anyway under a server side render, but it would be nice if it were supported.

Instead of

if (!this.isBrowser()) {
      return;
    }

We can load all the images instead.

Is this library compatible with Angular 9? I'm getting the following build error...

ERROR in node_modules/ngx-lazy-load-images/src/ngx-lazy-load-images.module.d.ts:1:22 - error
NG6002: Appears in the NgModule.imports of BooksModule, but could not be resolved to an NgModule class

1 export declare class LazyLoadImagesModule {
                       ~~~~~~~~~~~~~~~~~~~~

Something similar to what is outlined here, https://jmperezperez.com/medium-image-progressive-loading-placeholder/. Where you specify a tiny blurred version of the image to appear in place of the image that is about to be loaded.

I have a component which I bind an @input, [attr.data-src]="url". When the map files are loaded and in ng serve` the functionality works fine, but when I build for production, it doesn't work. I see in the dom inspector that the attr.data-src is still on the img tag, and in my component the function that I attach to the img.onload does not get fired. Any thoughts as to why this is happening?

I have project using Angular 10 with ngx-lazy-load-images: 2.0.0. When I upgrade a project from Angular 10 to Angular 11 I get this warning:

Package "ngx-lazy-load-images" has an incompatible peer dependency to "@angular/common" (requires "^9.1.4" (extended), would install "11.2.7"). Package "ngx-lazy-load-images" has an incompatible peer dependency to "@angular/core" (requires "^9.1.4" (extended), would install "11.2.7").

I can upgrade with the '--force' option, but will these warnings affect the app in the future?

Hi,

I'm getting errors, with the following code:

<div class="row" *ngIf="isLoadingFinished()">
  <div *ngFor="let item of items | SortItemsByTitlePipe; let i = index" class="col-lg-4 col-md-6 col-sm-6 col-xs-12" lazy-load-images>
    <img *ngIf="item.images[0] != null" data-src="http://peacefultomorrows.org/wp-content/uploads/2016/06/two-doves.png"
         width="150px" height="150px" class="image-style">
  </div>
</div>

A bad HTTP response code (404) was received when fetching the script.

Failed to load resource: net::ERR_INVALID_RESPONSE

Cant get attr.data-src to work with interpolated data

<div *ngFor="let ourwork of ourworks" lazy-load-images>
    <div class="wide {{ourwork.className}}">
	    <div class="page-wrap">
		    <img class="logo" attr.data-src="{{ ourwork.imgSrc }}"><br>
		    <h2>{{ourwork.h2Title}}</h2>
		    <h3>{{ourwork.h3Title}}</h3>

		    <p class="short-description">{{ourwork.shortDescription}}</p>
		    <a routerLink="{{ourwork.routerLink}}" class="button {{ourwork.buttonColor}}">View More</a>
	    </div>
     </div>
 </div>

No console errrors, images arent showing up... works perfectly when you use

data-src="website.com/url"

but I obviously want to use interpolation so I don't have write that 100 times

offset value should be 'Number of px a image should be loaded before it is in view port'

Intersection observere , is not trigger for every alternative, rail of images

Hello. I want to add authorization header before send request to server. Could you please clarify it is possible?

Angular version: 6.0;
ngx-lazy-load-images: 1.3.1

I'm trying to get my images to load in IE10 which obviously doesn't work as it doesn't support MutationObserver. I've tries including this shim but that doesn't help either.

https://github.com/megawac/MutationObserver.js

Just wondering if you have any ideas on workarounds that may work.