Is there a way to identify whether the image file is present in my specific situation?

Question

Is there a way to identify whether the image file is present in my specific situation?

I have a collection of images laid out as shown below

image1.png
image2.png
image3.png
image4.png
…
…
image20.png



secondImg1.png
secondImg2.png
secondImg3.png
secondImg4.png
secondImg5.png
…….
……..
secondImg18.png

My goal is to dynamically load one image at a time.

This is my JavaScript code

var index = 1;
var timer = setInterval(function(){playAnimation()},200);

function playAnimation(){
    $('#holder').attr('src','image/image' + index + 'png')
    index++
}

While my code provides a basic outline of how it functions, I am unsure about how to limit the index values to 20 and 18 in order to stop the animation. (Although using an if statement to check for 20 or 18 could work, I believe there might be a more efficient solution)

Essentially, I would like to detect if my application attempts to load image21.png and secondImg19.png and halt the process as these files do not exist or may be corrupted. Is there a way to achieve this? Your assistance is greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

To handle errors when loading images, you can utilize the .error() event handler

$('#holder').attr('src', 'image/image' + index + 'png').error(function () {
    //Perform actions if image does not exist
});

Refer to the jQuery Docs for more information

The error event is triggered for elements like images that are part of a document and loaded by the browser. It is invoked when an element fails to load correctly.

Answer 2

To handle errors when loading images, you can utilize the .error() event handler

$('#holder').attr('src', 'image/image' + index + 'png').error(function () {
    //Perform actions if image does not exist
});

Refer to the jQuery Docs for more information

The error event is triggered for elements like images that are part of a document and loaded by the browser. It is invoked when an element fails to load correctly.

Is there a way to identify whether the image file is present in my specific situation?

Answer №1

Similar questions

Align the items in the center of a Bootstrap navigation bar

Maximizing Efficiency: Utilizing a Single Panel across Multiple HTML Files with jQueryMobile

What is the method for a Greasemonkey script to divide a link into three interconnected links?

What is the best way to handle AJAX responses in an onchange event

Empowering user accessibility through intricate custom elements

It appears that the use of "window.location" is causing the ajax post

Navigate to a specific element using Selenium WebDriver in Java

Specify the input type to occupy the full width and be contained within its parent div

I am encountering challenges with React.js implemented in Typescript

The image source failed to load the image using the function

Tips for formatting text in a way that allows it to flow down a page smoothly as the

Updating the input value in a React application

What is the best way to programmatically click on an element within the body of a webpage from an Angular component?

Ways to modify an object similar to manipulating an array collection

Each time a nested collapse occurs, it triggers its parent collapse

The pagination styles in Bootstrap are refusing to be overwritten by custom CSS variables

What is the best way to incorporate PHP code within a JavaScript function?

Tips on incorporating the $ symbol into a pseudo element

In a particular configuration involving Docker and Nginx rewrite rules, there is a notable alteration in URLs that include question marks when utilized in jQuery.ajax calls

Run a section of code located in a different file