Question

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

Angular有可能吗？

以前我使用过jQuery LazyLoad Plugin，但是我试图这样做而不必同时使用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属性并替换＆＃34; ng-src＆＃34;使用tempData 例如。在html中

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

注意：我们不是直接分配src，因为我们希望阻止图像向服务器发送加载图像的请求。

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

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

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

这就是全部!!!

感谢您阅读!!!

Answer 3

我认为你可以将源绑定到一个getter，它只返回值，如果元素是可见的（假设你使用某种类型的绑定来触发img的可见性）。

例如，在控制器中使用ng-src="{{getImgSource()}}"：

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

但是，如果这是你必须经常使用的东西，也许你应该考虑创建自己的指令来做到这一点。

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

3 个答案: