Images already loaded

[igorissen]

Hi,

I'm trying to lazy loading an horizontal list of images but all images already loaded without me having to scroll right.

This is my code.

<ul class="episodes" afkl-image-container>
    <li ng-repeat="episode in season.episodes" class="episode">
      <div class="ep-screenshot">
          <div afkl-lazy-image="{{episode.images.screenshot.thumb}}" afkl-lazy-image-options='{"offset": 1000, "className": "screenshot"}' style='background: url({{showvm.landscapePlaceholder}});' class="afkl-placeholder"></div>
      </div>
      <div class="ep-metadata">
          <p class="ep-header truncate">
              <a target="_blank" ng-href="{{'episode.url}}">
                  <span class="ep-label">{{episode.label}}</span>
                  <span class="ep-title" ng-if="episode.show_title">{{episode.title}}</span>
              </a>
          </p>
          <p class="ep-date">{{episode.first_aired | date : 'EEEE, MMMM d, y h:mm a'}}</p>
      </div>
    </li>
</ul>

And this is the resulted HTML code

<div afkl-lazy-image="https://walter.trakt.us/images/episodes/000/073/967/screenshots/thumb/29228a478a.jpg" afkl-lazy-image-options="{'offset': 1000, 'className': 'screenshot'}" style="background: url(base64-image here);" class="afkl-placeholder" afkl-lazy-image-loaded="done">
    <img alt="" class="afkl-lazy-image screenshot" src="https://walter.trakt.us/images/episodes/000/073/967/screenshots/thumb/29228a478a.jpg">
</div>

Any idea?

Thanks.

[SquadraCorse]

Sorry, in the code it's only about vertical scrolling. You will have to adapt the view calculation that it also takes notice off x-as. Since we have no usecase for it that was left out.

[igorissen]

The issue is also on vertical scrolling. I have a list of seasons and for each seasons I have a list of episodes with an image for each episodes.

<div id="content">
    <ul class="seasons">
        <li ng-repeat="season in showvm.seasons" class="season">
            <p>
                <span class="season-name">
                    <a target="_blank"
                       ng-href="{{season.number}}">{{season.name}}</a>
                </span>
                <span class="episodes-count">{{season.episode_count}} episodes</span>
            <div class="clearfix"></div>
            </p>

            <ul class="episodes" afkl-image-container>
                <li ng-repeat="episode in season.episodes" class="episode">
                    <div class="ep-screenshot">
                        <div afkl-lazy-image="{{episode.images.screenshot.thumb}}"
                             afkl-lazy-image-options='{"offset": 1000, "className": "screenshot"}'
                             style='background: url({{showvm.landscapePlaceholder}});'
                             class="afkl-placeholder"></div>
                    </div>

                    <div class="ep-metadata">
                        <p class="ep-header truncate">
                            <a target="_blank"
                               ng-href="{{episode.url}}">
                                <span class="ep-label">{{episode.label}}</span>
                                <span class="ep-title" ng-if="episode.show_title">{{episode.title}}</span>
                            </a>
                        </p>

                        <p class="ep-date">{{episode.first_aired | date : 'EEEE, MMMM d, y h:mm a'}}</p>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

The images are loaded before I'm scrolling.

[SquadraCorse]

So you url is a scrollable container? How do you use 'ep-screenshot', in other words how heigh is it without an image being loaded? It is easier to debug when sample can be triggered in the browser :)

[igorissen]

• So you url is a scrollable container?

It is the list of episodes which is a scrollable container.

• How do you use 'ep-screenshot', in other words how heigh is it without an image being loaded?

div.ep-screenshot
{
    width: 100%;
    height: 166px;
    border: 1px solid @bunker-color;
    position: relative;
}

I will try without the afkl-image-container directive.

EDIT

Removing the directive afkl-image-container doesn't work. All images are loaded afkl-lazy-image-loaded="done".

[SquadraCorse]

Sorry, do you have it somewhere online?

[igorissen]

Yes, but I can't give you the URL here. It's actually private for testing purpose. Can you give me your email ?

[SquadraCorse]

See https://github.com/afklm/ng-lazy-image/blob/master/package.json Maarten

[igorissen]

So... It work now after cleaning my code (HTML and CSS).

<!-- OLD -->
<div afkl-lazy-image="{{episode.images.screenshot.thumb}}"
        afkl-lazy-image-options='{"offset": 1000, "className": "screenshot"}'
        style='background: url({{showvm.landscapePlaceholder}});'
        class="afkl-placeholder">
</div>

<!-- NEW -->
<div afkl-lazy-image="{{episode.images.screenshot.thumb}}"
        afkl-lazy-image-options='{"className": "screenshot"}'>
</div>

Sorry about the inconvenience. And thanks for your help.