search

airfranceklm / ng-lazy-image

Angular directive for loading responsive image when container (which is preventing reflow) is in viewport.
http://afklm.github.io/ng-lazy-image/
MIT License
350 stars 64 forks source link

To rerun lazyload effect #11

Closed Shalling closed 9 years ago

Shalling commented 9 years ago

I'm developing a multi page in single file website based on Angular and using lazy load. The lazyload can run perfectly however when I hide the page and come back again, the images are loaded and NOT reload again. Actually what I want is the effect of reload, not the actual reload of image. Is there any way to do that?

SquadraCorse commented 9 years ago

hide page? Or destroy scope? Why do you want this effect if image comes from browser cache in ms? I try to understand your usecase.

Shalling commented 9 years ago

Sorry for late reply. My web application in multi-page in one file (Angular based). I'm using ng-show to show a selected page from side menu. On home page, the lazy load is working fine. But on other page that using lazy load, it seems like it run the effect before users click on side menu to come to that page. The effect is not to reload the image, but to make the application more appeal.

SquadraCorse commented 9 years ago

do you have a working link? can PM me if private. If ng-if/show is used then it will not be part of the current scope so the directive should not even be digested. As soon as it will become current scope the directive will start working, also in your network inspector you should be able to see what gets loaded when.

Shalling commented 9 years ago

Sorry, I'm very new to github and I couldn't find the way to PM you. However, I worked around on this issue by adding these codes.

When change page, $(".afkl-lazy-image").parent(".afkl-lazy-wrapper").addClass("afkl-lazy-image-loading");

And when scroll $(container).scroll(function(){ var top = $(container).scrollTop(); $(container).find(".afkl-lazy-wrapper").each(function(index,child){ if($(child).offset().top-450<top) { $(child).removeClass("afkl-lazy-image-loading"); } });

I'm not sure how to refer value true or false in ng-show. Maybe you can add one more directive so the lazy load will run only when it's true.

SquadraCorse commented 9 years ago

i only saw the posibility "loading" class was not set when you changed the src for the image while already having the image in place. I adjusted it so now when new source is requested it will have loading class on the container. I hope this is what you meant and really hope you will not use jQuery for this anymore :)

Please be aware that for having pages in SPA, the best way is to work with scope so you are able to destroy them instead of leaving them on the page (which i think you are doing now).