在下载真实图像之前如何显示一个占位符图像? [英] How to show a placeholder-image before the real image is downloaded?

问题描述

这个想法是在下载真正的高分辨率图像之前显示图像的低分辨率版本，最好使用img标签.

The idea is to show a low-res version of an image before the real high-resolution image has been downloaded, ideally using an img tag.

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

低分辨率图像将首先显示，下载后将替换为高分辨率图像.如何才能做到这一点?是否可以编辑img.src属性，还是应该创建其他内容(例如具有背景的包装div或另一个临时div)?

Low-res image would be visible first, and be replaced with high-res image after it has been downloaded. How can this be done? Is it possible to edit img.src attribute, or should something else (e.g. a wrapper div with background, or another temporary div) be created?

推荐答案

您可能想创建一个指令，实际上我会使用hires作为属性，因此默认情况下它以绝杀开头.

You'd probably want to create a directive, I'd actually have hires as the attribute, so that by default it starts with 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" />

这篇关于在下载真实图像之前如何显示一个占位符图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！