Question

我需要根据需要从angularjs数组中加载图像，这意味着我希望仅在滚动到该图像时才加载图像。图像的来源是base64。我可以加载图像，但不知道如何延迟加载。我的html：

 <table ng-if="This_Page.Images_Src" class="table">
    <tr >
      <td ng-repeat="One_Entry in This_Page.Images_Src track by $index" ng-init="index = $index">
          <img data-ng-src="{{One_Entry}}"   width="240" height="152">
      </td>
     </tr>
  </table>

我的js：

 $scope.Handle_Doc_Images_Arrival = function(data){

          if ((typeof data                != "undefined") &&
              (       data                != ""         ) &&
              (typeof data.Server_Status  != ""         ) &&
              (       data.Server_Status  == 200        )    ) {

            var l_Result = JSON.parse(JSON.stringify(data)) ;

            if(typeof l_Result.Server_Response.Result_Code !== "undefined" &&
                      l_Result.Server_Response.Result_Code ==  "0"            ) {

                $scope.This_Page.Doc_Images = [] ;
                $scope.This_Page.Images_Src = [] ;

                $scope.This_Page.Doc_Images = l_Result.Server_Response.Result_Data.Doc_Images ;

                for(var i = 0 ; i < $scope.This_Page.Doc_Images.length ; i++){
                    $scope.This_Page.Images_Src.push($scope.This_Page.Doc_Images[i].Image) ;
                }

            }
            else {
                $rootScope.Show_Error_Message('Attempt to get Doc Images failed : ' + l_Result.Server_Response.Result_Message) ;
                return ;
            }
        }
      }

Answer 1

您可以尝试使用plunker

<img style="width: auto;" my-lazy-src="https://www.w3schools.com/images/picture.jpg">

该部分代码摘自this article

根据需要从angulajs ng-repeat加载图像

1 个答案: