How to make beautiful product output angularjs?

Question

JavaScript

There is a site with goods https://lagani.ru/catalog/24/ The public uses angulajs. all the pictures are very different types worth 2 tasks
1) We need a beautiful output of pictures, as now, but without the effect of loading a photo, it seems that the site is very slow, the isotope library is used, such loading is very annoying, I think it is possible to generate positions and photos on the server side and display them later? how to deal with this 2) It is necessary that when scrolling
, the url changes, and the person can drop to the current position or press the back button.

<div class="viewport" id="viewport-scopeDatasource" ui-scroll-viewport>
  <div class="item" ui-scroll="item in datasource">{{item}}</div>
</div>

app.controller('test', [
    '$scope', '$log', '$timeout', function ($scope, console, $timeout) {
        var datasource = {};

        datasource.get = function (index, count, success) {
            $timeout(function () {
                var result = [];
                for (var i = index; i <= index + count - 1; i++) {
                    result.push("item #" + i);
                }
                success(result);
            }, 300);
        };

        $scope.test = "123";

        $scope.datasource = datasource;
    }
]);

Outputs nothing, the get function is not called for some reason, https://lagani.ru/test/12232/
already tried everything, what could be the problem?

Answer 1

1) Probably it is worth setting the size of the pictures in advance, then there will be no twitching.
I don't know exactly what it should do ui-scroll="item in datasource", but I suspect something like ng-repeat. It turns out that you are trying to iterate over the "datasource" array, which has a get function and no elements at all.