jquery sets default picture

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>

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="默认图片">

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

$('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.

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

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!