angularjs - 使用 ng-src 防止图像加载直到它在视口内

Question

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

Angular可以做到这一点吗？

以前我使用过jQuery LazyLoad Plugin，但是我试图这样做而不必同时拥有 Angular 和 jQuery。

Answer 1

如果您仍然感兴趣，我在 github 上找到了这个 repo： 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 步：在标签中使用延迟加载属性并将“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 文件。这将安装依赖项，您的代码现在可以构建。

就这样！！！

感谢阅读！！！

Answer 3

我认为您可以将源绑定到仅在元素可见时才返回值的 getter（假设您正在使用某种绑定来触发 img 的可见性）。

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

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

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