Question

这个想法是在下载真正的高分辨率图像之前显示图像的低分辨率版本，理想情况下使用img标记。

<img lowres="http://localhost/low-res-image.jpg" ng-src="http://localhost/low-res-image.jpg">

首先可以看到低分辨率图像，并在下载后用高分辨率图像替换。如何才能做到这一点？是否可以编辑img.src属性，或者是否应该创建其他东西（例如带背景的包装div或其他临时div）？

Answer 1

你可能想要创建一个指令，我实际上已经雇用了这个属性，因此默认情况下它以lores开头。

JS：

app.directive('hires', function() {
  return {
    restrict: 'A',
    scope: { hires: '@' },
    link: function(scope, element, attrs) {
        element.one('load', function() {
            element.attr('src', scope.hires);
        });
    }
  };
});

HTML：

<img hires="http://localhost/hi-res-image.jpg" src="http://localhost/low-res-image.jpg" />

Answer 2

因为ng-src将替换src中的任何内容，为什么不同时使用它们？

<img src="img/placeholder.jpg" ng-src="{{actualone.img}} "  height="150px " width="300px ">

使用普通src作为占位符。它将被替换为ng-src准备就绪的图像。

Answer 3

上述答案具有误导性，这就是原因。你需要取消绑定load事件，因为它会在桌面和移动浏览器上造成无限的负载循环，如果你在ng-repeat指令中运行它，每次src替换都会导致新的load事件被触发，因此替换图像等。上面的答案导致了我的应用程序不仅打破了性能，还在移动设备上造成了崩溃，直到我添加了unbind。

.directive('imageloaded', function () {
return {
  restrict: 'A',
  scope:{imageloaded:'@'},
  link: function postLink(scope, element, attrs) {
    element.bind('load', function() {
        //console.log('load fired') <- just console log it and comment the unbind and you will see the 10000s of console logs.
        element.attr('src', scope.imageloaded);
        element.unbind('load');
    });
  }
};

}）;

Answer 4

您可以在加载后更改图像的src属性。你需要将load事件绑定到image以找出图像加载的时间。

查看此页面 Detect image load by jQuery

您可以使用指令设置初始src属性并绑定load事件以将src更改为主图像。

Answer 5

简单的考试。试试这个，不使用指令
的 HTML

<img ng-src="{{loading.image_url}}" >

<强>的Javascript

//within controller $scope.loading.image_url = 'path_to_loading_image'; var loaded_img = 'path_to_loaded_image'; $http.get(loaded_img).then(function() { $scope.loading.image_url = loaded_img; }, function() { console.log('something went wrong!'); });

Answer 6

我找到了这个简单的解决方案

<img ng-src="{{::val.image}}"  width="400" height="300" alt="" onerror="this.src='img/logo-sm.png'"  src="img/logo-sm.png">

希望对您有所帮助

如何在下载真实图像之前显示占位符图像？

6 个答案: