Issue images are not loaded when scroll using jquery

[bdairy]

Hello,, at the top of my page I have an anchor tag, when I click on it i run this function:

$("body").animate({scrollTop: $('#picks').offset().top}, "slow");

picks is a div with ng-lazy-image repeater. when I reach there at the bottom of the page by default I cannot see the images,, I have to scroll manually,, just a tiny scroll.then the images are loaded.

It is a common issue with lazy images.. a lot of solution I got,, like window.resize, which didn't work, and I give images width and height, which I cannot in my case because image size has to be fluid.. any idea?

[SquadraCorse]

after the animation (which is available in jquery) sent the event the afkl image is listening(see docs or code for that event) on and apply it!

M

Op 2 mrt. 2016 om 07:50 heeft bdairy notifications@github.com het volgende geschreven:

Hello,, at the top of my page I have an anchor tag, when I click on it i run this function:

$("body").animate({scrollTop: $('#picks').offset().top}, "slow");

picks is a div with ng-lazy-image repeater. when I reach there at the bottom of the page by default I cannot see the images,, I have to scroll manually,, just a tiny scroll.then the images are loaded.

It is a common issue with lazy images.. a lot of solution I got,, like window.resize, which didn't work, and I give images width and height, which I cannot in my case because image size has to be fluid.. any idea?

— Reply to this email directly or view it on GitHub.

[bdairy]

Thanks man for your fast reply,, as per your code your listening to two events

 angular.element($window).on('resize', _onResize);
 angular.element($window).on('scroll', _onViewChangeDebounced);

and after the animation I am calling these functions :

 $window.trigger('scroll');
  $window.trigger('resize');

but still nothing happens.. I wonder if it worth to know but I've added a custom directive that observes the attribute of afklLazyImageLoaded to handle error images . THis is a plnkr to demonstrate the issue [http://plnkr.co/edit/b9P16jKVdWZXN048J8wy?p=preview]()

[SquadraCorse]

Nope, try to send the event on your scope. Also maybe better to use angular scroll directive instead of jQuery. You can trigger lazy image with:

$rootScope.$broadcast('afkl.lazyImage.destroyed');

So in your example it looks like this:

.controller('appCtrl', ['$scope', '$rootScope', function mainCtrl($scope, $rootScope) {

 var getColor = function() {
            var color = Math.floor(Math.random()*16777215).toString(16);
            return color;
        };

var getImage = function(){
  var color = getColor();
   return  '//placehold.it/100x100/' + color +'/ffffff 480w, //placehold.it/150x150/'+ color +'/ffffff 768w';

}       
    $scope.images = [];    
  for(var i=0;i<4;i++){
    $scope.images.push(getImage());
  }

  $scope.go = function() {
    console.log('ho');
    $("body").animate({scrollTop: $('#picks').offset().top}, "slow", function() {
      // Animation complete.
      $rootScope.$broadcast('afkl.lazyImage.destroyed');
    });

  }

}])

This is mostly needed when you do stuff out of Angular scope. So then you dont need to trigger scroll yourself!

[bdairy]

Again thanks for your reply.. though it didn't work,, I've updated my plnkr ,, kindly check it out here anf for the reference,, using angular achorScroll works fine,, but it is not animated,, and it adds the stupid hashtags on the top..

[SquadraCorse]

Can you just please use the code i gave? You broadcast before the JQUERY animate is done!

[bdairy]

my bad man, you are a great man with a wonderful directive.. I LOVE IT

[SquadraCorse]

Thanks, so i will close this one :)