How to check if an image exists with jquery-Front-end Q&A-php.cn

How to check if an image exists with jquery

PHPz

Release： 2023-04-07 14:26:04

Original

1153 people have browsed it

For websites that need to display images, we may store the path of the image in the database or in the data returned through the API. When we need to display images on the page, sometimes we encounter situations where the image does not exist. At this time, the blank image display on the page will bring a bad experience to the user. In order to improve the user experience, we can use jQuery to check whether the image exists and process it accordingly.

1. Use jQuery to check whether the image exists

We can use the .load() method to detect whether the image is loaded successfully. The .load() method triggers an event when the selected element has finished loading. If the image is loaded successfully, the load event will be triggered; otherwise, the error event will be triggered, as shown below:

$('img').on('load', function() {
  console.log('Image is loaded');
}).on('error', function() {
  console.log('Image is not loaded');
});

Copy after login

In the above example, we first select all the image elements, and then listen to their load and error events , output "Image is loaded" when the image is successfully loaded, otherwise output "Image is not loaded".

2. Handling the situation where the picture does not exist

When we detect that the picture does not exist, we can handle it in the following ways:

Display Default picture

When the picture does not exist, we can add a default "no picture" picture for each picture in the website. When it is detected that the picture does not exist, we can display the default picture by modifying the src attribute of the picture element. The code is as follows:

$('img').on('error', function() {
  $(this).attr('src', 'default.jpg');
});

Copy after login

In the above code, when it is detected that the picture does not exist, we change the Change the src attribute to default.jpg to display the default image.

Display image loading failure prompt

We can also display a prompt text at the image location when the image loading fails to prompt the user that the currently displayed image has failed to load. The code is as follows:

$('img').on('error', function() {
  $(this).after('<p class="load-error">图片加载失败</p>');
});

Copy after login

In the above code, we use the .after() method to add a

element after the image element to display the prompt text for image loading failure.

Hide image container

When the image does not exist, we can also hide its container (such as

element) to make the page layout more beautiful . The code is as follows:

$('img').on('error', function() {
  $(this).parent().hide();
});

Copy after login

In the above code, when we detect that the image does not exist, we use the .parent() method to select the parent element of the current image, and then use the .hide() method to hide it.

3. Summary

In this article, we introduced the method of using jQuery to check whether the image exists and handle it accordingly. When dealing with the situation where images do not exist, we can display default images, prompt content or hide containers according to actual needs to improve user experience and page layout.

The above is the detailed content of How to check if an image exists with jquery. For more information, please follow other related articles on the PHP Chinese website!