Blazy on AngularJS

Question

Hi guys I'm trying to make blazy work with AngularJs, I followed their documentation but it still does not work.

Here's the snippets of my code:

Script:

(function() {
              var bLazy = new Blazy({
                breakpoints: [
                  {
                    width: 420, // max-width
                    src: 'data-blazy-small'
                  },
                  {
                    width: 1200, // max-width
                    src: 'data-blazy-large'
                  },
                ]
                , success: function(element){
                  setTimeout(function(){
                    var parent = element.parentNode;
                    parent.className = parent.className.replace(/\bloading\b/,'');
                  }, 200);
                }
              });
          })();

HTML:

<img ng-repeat = "image in main.imageLists"
       class="b-lazy"
       data-blazy-large="{{image.largeImg}}"
       data-blazy-small="{{image.smallImg}}"
       alt="Responsive Images" />

Controller:

this.imageLists = [{ smallImg:'assets/images/bear-small1.jpg',
                               largeImg:'assets/images/big-bear2.jpg',

                            },
                            {  smallImg:'assets/images/bear-small2.jpg',
                               largeImg:'assets/images/big-bear1.jpg',

                          }];

Object is to properly parse using ng-src but no lazyloading happens. Can you enlighten me as to what am I'm doing wrong here?

What's probably happening is that Blazy runs before ng-repeat is done actually generating the html, you'll have to wrap Blazy in a directive — sirrocco, Dec 11 '15 at 04:32

score 1 · Answer 1 · answered Mar 25 '16 at 09:45

1

var bLazy = new Blazy({ → var blazy = new Blazy({
img tag need "src"

reference~ http://dinbror.dk/blog/blazy/#Multi (Multi-serve images)

answered Mar 25 '16 at 09:45

Jack Kao

26
2

Blazy on AngularJS

1 Answers1