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

Update: The sum of products and total cost are correctly calculated, however, the values are not being updated when the quantity is adjusted

There was a type error that occurred because the property 'addEventListener' could not be read from an undefined value

While troubleshooting the app, I encountered an error that says: "The property 'answers' cannot be read as it is undefined."

The "begin" parameter of the Angular limitTo filter appears to be ineffective in Angular version 1.3

Add fresh inline designs to a React high-order component creation

The problem stemming from the implementation of the useNavigate() Hook in a personalized React-Admin application

failure of pipe during search for art gallery information

Steps to create a pop-up displaying a unique message ID retrieved from my database

Having trouble implementing express-unless to exclude specific routes from requiring authentication

Error encountered in Listings#index with ExecJS RuntimeError

In the world of Vue3 and Vue-Router, accessing parameters using the $route object is a breeze during development, but may prove trick

Having trouble with router.push in Vue3 and Vuex4?

Creating Vue.js components dynamically

Variations in Angular scope variable behavior

Enhance the functionality of jqGrid by customizing key bindings for arrow and tab keys

What does the "done" callback function entail in Node.js?

`Need help setting the active class for a bootstrap navbar using Angular JS?`

Tips for incorporating several d3 elements on a single webpage

Using both withNextIntl and withPlaiceholder simultaneously in a NextJS project causes compatibility issues

Animating the opacity of elements using jQuery and CSS