Предотвращение загрузки изображения до тех пор, пока оно не находится в окне просмотра, используя ng-src

Я хотел бы иметь возможность предотвратить изображение, у которого атрибут ng-src будет загружен, пока он не будет виден в окне просмотра.

Возможно ли это с помощью Angular?

Раньше я использовал jQuery LazyLoad Plugin, однако я пытаюсь сделать это, не имея как Angular, так и jQuery.

Ответ 1

Если вам все еще интересно, я узнал об этом репо на github: https://github.com/afklm/ng-lazy-image

Я попробовал, и это потрясает!

Изображения загружаются только при появлении в видовом экране И вы можете выбрать, какое изображение загружать на основе размера экрана. Это означает, что вы можете загружать меньшие изображения для мобильных пользователей;)

Ответ 2

Я думаю, вы могли бы просто привязать источник к получателю, который возвращает значение только в том случае, если элемент виден (если вы используете привязку какого-то типа, чтобы вызвать видимость img).

Например, используйте ng-src="{{getImgSource()}}" и в вашем контроллере:

scope.getImgSource = function(){
    if(scope.showImg){
        return "myImageUrl.png";
    }
    return ""; 
};

Однако, если это то, что вам нужно будет использовать много, возможно, вам стоит задуматься о создании собственной директивы для этого.