Как показать изображение заполнителя в AngularJS

Question

Используя AngularJS, и в конкретном виде мы используем естественный размер изображения для управления макетом (используя максимальные высоты, максимальные ширины, но позволяя изображению максимально расширяться, чтобы поместиться в этой области).

Мы также используем заполнитель data-uri для изображения на основе предварительно определенной высоты и ширины изображения, а также информации о доминирующем цвете. Причина, по которой мы это делаем, заключается в том, что использование изображения холста дает нам ту же «естественную» информацию о размерах, и нам не нужно постоянно пересчитывать ширину и высоту для div для размеров при сохранении пропорций и т. Д.

Итак, директива сначала создает data-uri, используя Canvas, и устанавливает его как значение scope.imgSrc, затем, после небольшой задержки (всего $timeout(0)), мы обновляем это значение области действия с помощью фактического URL источника изображения.

К сожалению, это не всегда работает. Часто шаблон фактически не отображается до тех пор, пока мы не обновим значение области, чтобы оно указывало на реальный URL. В результате data-uri никогда не отображается на экране, и в итоге мы отображаем только реальный URL. В медленной сети это означает пустую область, где должен быть заполнитель, потому что заполнитель никогда не рендерится.

Можно ли как-нибудь гарантировать, что что-то будет отображаться хотя бы один раз, прежде чем я переключу значение?

Answer 1

Решением, которое я в итоге выбрал, была пользовательская директива onload для изображения, которая удаляет значение dataURI в сочетании с самим тегом img с использованием либо dataURI, либо источника img.

В шаблоне:

<img ng-src="{{dataURI || imageSource}}" custom-onload="removeDataURI()">

В директиве:

scope.dataURI = getTheCanvasBasedURI();
scope.imageSource = getTheRealImageURL(); // this is async.

scope.removeDataURI = function() {
  scope.dataURI = undefined;
}