динамический img-src с изображением заполнителя

Question

У меня есть следующее затруднительное положение. К сожалению, я не могу использовать plunkr, поскольку изображение идет с защищенного сайта, и я не знаю открытого URL-адреса, который постоянно меняет изображения. Я не могу переключиться на локальное анимированное изображение, так как оно должно быть на внешнем сервере, чтобы продемонстрировать проблему. Но концепция довольно прямолинейна.

У меня есть следующий URL-адрес, который я использую для отображения изображения. Теперь сервер, который отправляет это изображение, постоянно меняет это изображение со скоростью примерно 3 кадра в секунду.

<img ng-src="{{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps=3&buffer=1000&user={{LoginData.username}}&pass{{LoginData.password}}&rand={{rand}}" width="100%" style="backgroundimage:url('http://placeholder.com/placeholder.jpg');"/> 

Теперь вот проблема: - Я хочу, чтобы показать текст держателя места или изображение для следующих случаев: а) Иногда это занимает много времени для сервера чтобы сделать первый кадр б) Иногда сервер просто не кажется, чтобы отправлять изображения

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

проблема я столкнулся в том, что в момент начала IMG-Src, экран становится белым, и через несколько секунд изображения начинают потоковое воспроизведение (ситуация выше) или scr een остается пустым в течение длительного времени (ситуация b)

Я пробовал различные методы: a) Как вы видите в приведенном выше коде, я пробовал фоновое изображение. Это только показывает, возвращается ли ошибка img-src (например, я принудительно меняю URL-адрес на недопустимый или недоступный). Что происходит со мной, так это то, что он отображается мгновенно, но в тот момент, когда появляется img-src, экран становится белым (пока изображения не начинают с сервера)

b) Я пробовал различные методы, включая приложение. глобальный метод захвата изображения в if a ngSrc path resolves to a 404, is there a way to fallback to a default?

Но основная проблема заключается в том, что моя ситуация не связана с ошибкой изображения. Кажется, что сервер застревает или задерживается, но не возвращает ошибку в HTTP ==>, и в этом случае мое окно для изображения становится белым. И я хотел бы решить это, добавив текст поверх него (или изображение поверх него), но только до того, как начнутся реальные изображения.

Спасибо

Answer 1

для моей собственной потребности, я сделал директиву отображения шаблонного изображения, если серверы есть ошибка:

.directive('placeholderImg', function() { 
    //default place holder 
    return { 
     restrict: 'A', 
     link: function(scope, element, attr) { 
      var img = window.scriptRoot + 'img/divers/avatar_min.jpg'; 
      if (attr.placeholderImg) { 
       switch (attr.placeholderImg) { 
        case 'profile': 
         img = 'img/avatar.png'; 
         break; 
        case 'profile_small': 
         img = 'img/avatar_min.png'; 
         break; 
        case 'profile_large': 
         img = '/img/nothumb.png'; 
         break; 
        //Add more placeholders 
       } 
      } 

      //If ngSrc is empty 
      if (!attr.ngSrc) 
       element[0].src = img; 

      //If there is an error (404) 
      element.on('error', function() { 
       element[0].src = img; 
      }); 

     } 
    }; 
}); 

И я использую это так:

<img data-ng-src="{{app.picture}}" data-placeholder-img="profile_large"> 

Насколько я понимаю, ваша основная проблема заключается в том, что вы хотите отображать что-то во время загрузки изображения. Возможно, вы можете изменить мою директиву, установить элемент [0] .src в placeholder в начале кода и перегрузить его, связав событие загрузки после его загрузки (так же, как я связал событие ошибки).