使用ng-src阻止图像加载到视口内

Question

我希望能够阻止具有ng-src属性的图像加载,直到它在视口中可见.

Angular有可能吗？

以前我使用过jQuery LazyLoad插件,但是我试图这样做而不必同时使用Angular和jQuery.

Answer 1

如果您仍然感兴趣,我在github上发现了这个回购:https: //github.com/afklm/ng-lazy-image

我尝试了它,它摇滚!

图像仅在出现在视口中时加载,您可以根据屏幕大小选择要加载的图像.这意味着您可以为移动用户加载较小的图像;)

Answer 2

在angularjs中,可以使用指令实现延迟加载.

脚步:

步骤1.创建指令如下:

App.directive('lazyLoad', lazyLoad)
function lazyLoad() {
     return {
          restrict: 'A',
          link: function (scope, element, attrs) {
                 const observer = new IntersectionObserver(loadImg);
                 const img = angular.element(element)[0];
                 observer.observe(img)
                 function loadImg(changes) {
                        changes.forEach(change => {
                              if (change.intersectionRatio > 0 && change.target.getAttribute('tempData')) {
                                    change.target.src = change.target.getAttribute('tempData');
                              }
                        });
                 }                     
          };
     };
};

第2步:在标签中使用lazy-load属性,并将"ng-src"替换为tempData,例如.在HTML中

<img ng-repeate="obj in objects" lazy-load tempData="obj.srcURL">

注意:我们不是直接分配src,因为我们希望阻止图像向服务器发送请求以加载图像.

重要说明:依赖于es-6.在进行构建时,您可能会收到解析错误.

*解决方案:npm install --save gulp-uglify-es

安装命令后需要更新gulp文件.这将安装依赖项,您的代码现在可以进行构建.

就这样!!!

谢谢你的阅读!