image source that changes dynamically with a placeholder image

Question

image source that changes dynamically with a placeholder image

Currently, I am facing a certain issue. Unfortunately, I cannot provide a plunkr example as the image is sourced from a protected site and there are no open URLs available that constantly serve changing images. Additionally, I am unable to use a local animated image because it must be hosted on an external server in order to demonstrate the problem. Despite this limitation, the concept is quite simple.

The URL I am utilizing to display an image is being sent from a server that changes the image at a rate of approximately 3 frames per second.

<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');"/>

Here lies the issue: I would like to display a placeholder text or image in the following scenarios: a) The server may take some time to render the initial frame. b) Sometimes, the server fails to send any images at all

I want to prevent the screen from remaining blank in order to avoid causing confusion for the user.

The main problem I am encountering is that when the img-src loads, the screen turns white briefly before the actual images start streaming (scenario a) or remains blank for an extended period (scenario b).

I have tried different methods such as using a background image as shown in the code above. However, this only appears if there is an error in loading the img-src. In my case, it momentarily displays but then turns white once the img-src is encountered (until the server sends the images).

In addition, I have explored various techniques including the app.directive global image trap method mentioned in if a ngSrc path resolves to a 404, is there a way to fallback to a default?

The main challenge here is that my situation does not involve an image error. It seems like the server experiences delays without returning an HTTP error, causing the image window to turn white during that timeframe. I am looking to address this by overlaying text (or an image) on top of it until the actual images begin to arrive.

Thank you

javascript angularjs

Answer 1

Answer №1

Recently, I created a custom directive to show a placeholder image in case there is an error with the server:

.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;
            });

        }
    };
});

This directive can be implemented like this:

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

If your concern is about showing something while the image is loading, you can modify the directive by setting element[0].src to a placeholder initially and then updating it once the image loads, similar to how the error event is handled.

Answer 2

Recently, I created a custom directive to show a placeholder image in case there is an error with the server:

.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;
            });

        }
    };
});

This directive can be implemented like this:

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

If your concern is about showing something while the image is loading, you can modify the directive by setting element[0].src to a placeholder initially and then updating it once the image loads, similar to how the error event is handled.

Answer 3

Answer №2

Instead of relying heavily on JS for logic, I suggest utilizing background images in CSS. We can incorporate a small icon on a grey background as a placeholder, and when the image URL loads, leverage z-index to display the image over the color and icon. For more details, check out my post here.

Answer 4

Instead of relying heavily on JS for logic, I suggest utilizing background images in CSS. We can incorporate a small icon on a grey background as a placeholder, and when the image URL loads, leverage z-index to display the image over the color and icon. For more details, check out my post here.

image source that changes dynamically with a placeholder image

Answer №1

Answer №2

Similar questions

Issue with Date Picker not properly storing selected date in MySQL database

Combining Multiple Arrays into a Single Array

Is there a built-in function in Firefox that can retrieve a list of all indexedDB names stored in the

A guide to finding the mean in Angular by utilizing JSON information

Storing data using angular-file-upload

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

Using the Angular translate filter within a ternary operator

What is the best way to set a value for a variable within a UI component in React?

What is the duration that browsers retain downloaded assets during a single session?

Tips for navigating upwards to a specific element and successfully clicking on it in Selenium

Creating a simple Node.js project using material web components - a step-by-step guide

Display a DIV next to the mouse cursor when a span is hovered over

Sorting the keys of objects within an array

You cannot assign an optional parameter in Express after it has already been declared

Having trouble with ReactJS updating the state in the correct format using moment?

Uniting 2 streams to create a single observable

Can I extract JSON data from the AJAX response?

An issue encountered while implementing a post method with fetch and Express

Use ng-repeat to extract information from an array and populate it into a datalist

Activate the button when the password is correct