javascript - 带有占位符图像的动态 img-src

Question

我都面临以下困境。不幸的是，我无法共享 plunkr，因为图像来自 protected 站点，而且我不知道有任何开放的 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');"/>

现在问题是: -- 我想为以下实例显示占位符文本或图像:a) 有时，服务器渲染第一帧需要时间b) 有时服务器似乎不发送图像

我真正想避免的是屏幕不保持空白 - 这会让用户感到困惑

我面临的问题是，img-src启动的那一刻，屏幕变白，几秒钟后图像开始流式传输(上面的情况a)或屏幕长时间保持空白(情况b)

我尝试过多种方法:a)正如您在上面的代码中看到的，我尝试了背景图像。这仅显示 img-src 是否返回错误(例如，我强行将 url 更改为无效 URL 或无法访问)。我身上发生的事情是它会暂时显示，但是遇到 img-src 时屏幕会变成白色(直到图像开始来自服务器)

b) 我尝试了各种方法，包括 if a ngSrc path resolves to a 404, is there a way to fallback to a default? 中的 app.directive 全局图像陷阱方法

但核心问题确实是我的情况不涉及图像错误。看起来好像服务器被卡住或延迟，但它没有在 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">

我知道您的主要问题是您想在加载图像时显示一些内容。也许您可以修改我的指令，将 element[0].src 设置为代码开头的占位符，并在加载后通过绑定(bind) load 事件来重载它(与我绑定(bind)错误事件的方式相同)。