Home > Web Front-end > Front-end Q&A > jquery sets default picture

jquery sets default picture

PHPz
Release: 2023-05-24 20:14:06
Original
611 people have browsed it

In web design, it is often necessary to insert pictures into the page to enrich the page content and improve the user experience. However, in actual development, problems such as image loading failure and non-existence will inevitably occur, and blank images on the page often affect the user's perception. In order to solve this problem, we can improve the user experience by setting the default image. For this, we can use the jQuery library. Let's take a closer look at how to use jQuery to set a default image.

1. Load the jQuery library

First, we need to introduce the jQuery library into the HTML file. The code is as follows:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Copy after login

The CDN method is used here to introduce the jQuery library. Of course It can also be introduced locally.

2. Set the default image

Next, we need to set the default image in the HTML page. In actual projects, we can set a picture with appropriate size and corresponding content as the default picture according to needs. For example, we can add the following HTML code to the code:

<img src="default.jpg" alt="默认图片">
Copy after login

The default.jpg here is the default image we set.

3. Use jQuery to set the default image

Next, let’s take a look at how to use the jQuery library to set the default image.

  1. Detect whether the image is loaded successfully

We first need to detect whether the image is loaded successfully. If the image loads successfully, the image itself is displayed; if the image fails to load, the default image we set before is used. The code is as follows:

$('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        $(this).attr('src', 'default.jpg');
    }
});
Copy after login

$('img') here means selecting all pictures, and its each() method means traversing each element. When the image does not load successfully, use the attr() method to change the src attribute of the image to the default image we set.

  1. Use event monitoring

We can also use event monitoring to realize the success and failure of image loading. The code is as follows:

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

The $ here ('img') means to select all pictures and use the on() method to listen for the error event of the picture. When the event is triggered, use the attr() method to change the src attribute of the image to the default image we set.

It should be noted that both of the above methods can be used, but the second method needs to be executed only when there is an error in image loading, while the first method can be done before the image is loaded. Set default picture.

4. Summary

So far, we have completed the operation of using jQuery to set the default image. In this way, even if there is an image loading error, the user experience can be better guaranteed and the page can be made more complete and beautiful. In actual projects, we can flexibly use this method to improve the user experience of the website according to needs and specific circumstances.

The above is the detailed content of jquery sets default picture. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template