Hi

[avinashksmeindia]

Image load time the loader is not visible using the css for the same.

.lazyload { opacity: 0; }

.lazyloading { opacity: 1; transition: opacity 300ms; background: #f7f7f7 url(loader.gif) no-repeat center; }

[aFarkas]

This should in general depend on the browser in combination with your markup.

The code above should simply just work in Chrome. While it might work or not in Firefox depending on your markup.

If you add a src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" to your images it should also work in FF.

Also note: That you should use a expand value, that ensures that a normal user shouldn't see an image loading. What you want is lazyloading in the background, but the user shouldn't notice that lazyloading was used.

Please close if this answers your question.

[avinashksmeindia]

Yeah i have added expand but i am not able to see the gif on even chrome.

[avinashksmeindia]

But the fadeIn effect is working according to the css opacity 0 to 1

[avinashksmeindia]

Actually when i am using data-src the loader appears but the image is also visible in the back and is getting loaded but when i use src or ng-src the fadeIn effect works but the loader gif is not visible.

[aFarkas]

I don't really understand what you mean. Here is an example.

https://jsfiddle.net/trixta/voferc4o/3/embedded/result/

1. you see a fadein of the loader.
2. the loader.
3. the image.

Maybe you demonstrate your issue.

[avinashksmeindia]

Is it possible that the i can show the same result using ?

[avinashksmeindia]

the code <//img src=//"imagepath" class=//"lazyload" //> Without the forward slash

[aFarkas]

If you use a src with the normal image and no transparent image, there is no lazyloading involved. You need:

<img data-src="imagepath" class="lazyload" />

Use the following markup to show code blocks btw:

your code

And the following for inline code: your code