default Image is not visible

[Malkiat-Singh]

I have added the default Image as well the lazyload image path .
Did not get anything visible until the lazyload Image loaded.
Same as on the example

[tjoskar]

Hi,

The example page was using the following css style:

img {
  opacity: 0;
}
img.ng2-lazyloaded {
  opacity: 1;
}

eg, it was intended to hide the image (and the default image) until the lazy-loaded image was loaded.

However, if you remove opacity: 0; you should be able to see the default image before the lazy-loaded image is loaded.

I have updated the example page with some more examples. Go to http://tjoskar.github.io/ng2-lazyload-image/ and click on "Default image" to see an example of using default images.
If you are using chrome, you can also use the "network throttling" in dev tools to simulate a longer loading time.

Did I answer your question?

[tjoskar]

You have example code here: https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/default-image.component.ts

[ghost]

@tjoskar I have tried everything, still not working, the default image doesn't show up at all, and the path is correct because if i replaced the lazyloder image with the default image and the default image loads, the issue is when i checked google chrome inspector tool, i see that there is no where the default image was attached to the src attribute of the image, instead the lazyloader image is attached by default. Please is there any other way around this? Waiting for your response.

Thanks

[tjoskar]

@kelvinrolex, I'm not sure that I follow. If the image that should be lazyloaded is already in the browser cache, the default image will never be visible. The algorithm follows:

1. Set default image to src

2. Check if the image is in viewport

   2.1 If the image is in viewport start download the lazyloaded image
   2.1.1 When lazyloaded image is downloaded, set lazyloaded image to src
   2.2 Else go to 2

I recorded a video to show how the default image is loaded: https://www.youtube.com/watch?v=p4hds8Au_qI

Do you have a code snippet that you can share so I can get a better understanding of what you are trying to do.

Thanks

[taseroth]

Looks like I have the same problem. If I use [src]="defaultImage" (and, of course have a defaultImage property), the src attribute of the img tag is not written before the image is loaded (comes into view port).

If I use no property binding (e.g.: <img src="foo.png" ..>), than the default image is loaded and replaced as expected.

[tjoskar]

@taseroth, Sorry for the late reply. What browser and OS are you using? I can not reproduce this in Chrome/Firefox/Safari on macOS.
Just to be clear; if you visit http://tjoskar.github.io/ng2-lazyload-image/fade-in-image and then pressing the link "default image". Aren't you seeing any picture on Nicolas cage then?

[bsh314]

I have the same issue. Default image is nod rendered (Only if I put it explicitly with "src" & hardcoded placeholder url).
Also I've noticed that "scrollspy" is not working correctly, some times lasyload loads first 2 or 3 elements &
all of the others will sty unchanged even after "intense" scrolling XD. Offset param seems not affecting this issue. There is one trick: if I re-load the page & scroll down before contaners are loaded, it loads all of the images...
There is no errors in the console or during compilation.

[tjoskar]

@bsh314, I do not follow.

Default image is nod rendered (Only if I put it explicitly with "src" & hardcoded placeholder url).

You should use src for the default image.
Let's say you are using the following code: <img [src]="defaultImage" [lazyLoad]="image">. Angular will compile that and give <img src="default-image.jpg"> to the browser (given defaultImage = 'default-image.jpg') and when the image is in the viewport, will the directive (ng2-lazyload) update the image-node to <img src="lazyload-image.jpg"> (given image = 'lazyload-image.jpg').

Also I've noticed that "scrollspy" is not working correctly ...

Are you referencing to bootstraps scrollspy? Can you reproduce the error without scrollspy?

[bsh314]

@tjoskar No, i'm not 8using bootstrap, that was only the way to name that type of functionality.
My default image issue:
<img src="default-image.jpg" [lazyLoad]="image"> -> this works
<img [src]="defaultImage" [lazyLoad]="image"> -> this dont work
Thanks for the reply!

[filipsuk]

I have the same problem. It only works if the img url is hard-coded in the template.
You have it hard-coded in your example:

// https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/default-image.component.ts
<img
        *ngFor="let image of images"
        src="https://www.placecage.com/1000/1000"
        [errorImage]="errorImage"
        [lazyLoad]="image">

Edit: And maybe it also works if AOT can hard-code the url into the template for you. In my case I get default image url from my previous API call, so it is dynamic. My goal is to use default image as low quality preview and lazy-load higher quality image to replace it.

[tjoskar]

@filipsuk: yup, that seems to be the issue. I can't believe I missed that detail.

This issue should be resolved in version 2.3.2. Please give it a try.

[filipsuk]

@tjoskar Problem seems to be fixed in 2.3.2. Thank you so much for your work! :)

[tjoskar]

I'm going to close this now. Please let me know of any of you still have the issue.