How does JavaScript implement the alternative display function when images fail to load?

JavaScript How to implement the alternative display function when the image loading fails?

In web development, we often encounter image loading failures. This may be due to network reasons, image link errors, or image non-existence. In order to improve the user experience, we can use JavaScript to display a default image or display a custom text when the image fails to load.

A common method is to use the onerror event, which is triggered when the image fails to load. We can use this event to write JavaScript code to implement the replacement display function. Here is a concrete example:

HTML code:

<img  src="/static/imghwm/default1.png"  data-src="path/to/image.jpg"  class="lazy"  id="myImage" onerror="handleImageError()" / alt="How does JavaScript implement the alternative display function when images fail to load?" >

JavaScript code:

function handleImageError() {
  var img = document.getElementById("myImage");
  img.src = "path/to/default-image.jpg";
  img.alt = "Image Failed to Load";
}

In the above code, we give <img alt="How does JavaScript implement the alternative display function when images fail to load?" >## The # element adds an onerror event and binds a function called handleImageError(). When the image fails to load, the handleImageError() function will be triggered.

In the

handleImageError() function, we first obtain the DOM object of the element through the document.getElementById() method . Then, set the src attribute to the default image we want to display (path/to/default-image.jpg), and set the alt attribute to self Defined prompt message ("Image Failed to Load").

With the above code, when the image fails to load, the default image will be automatically displayed instead and the corresponding prompt message will be given. In this way, whether the network is unstable when the user accesses the web page or the image link is wrong, friendly user prompts can be provided.

In addition to replacing the default image, we can also customize the displayed text according to actual needs. Here is an example that displays the text "Image loading failed" when the image fails to load:

HTML code:

<img  src="/static/imghwm/default1.png"  data-src="path/to/image.jpg"  class="lazy"  id="myImage" onerror="handleImageError()" / alt="How does JavaScript implement the alternative display function when images fail to load?" >
图片加载失败

JavaScript code:

function handleImageError() {
  var img = document.getElementById("myImage");
  var errorText = document.getElementById("errorText");
  
  img.style.display = "none";
  errorText.style.display = "block";
}

In the above code , we added an

id attribute to both the element and the

element respectively, through document.getElementById() method obtains their DOM objects.

When the image fails to load, we set the

display attribute of the element to "none", that is, hide the image. Then, set the display attribute of the

element to "block", which displays the text. This allows you to display customized text information when the image fails to load.

In actual development, the above sample code can be modified and expanded according to the specific needs of the web page. We can choose an appropriate default image or customized text based on the actual situation to provide a better user experience.

To summarize, it is a common practice to use JavaScript's

onerror event to implement an alternative display function when the image fails to load. Through reasonable code writing, we can replace pictures, display text or other operations according to actual needs, and provide better user prompts.

The above is the detailed content of How does JavaScript implement the alternative display function when images fail to load?. For more information, please follow other related articles on the PHP Chinese website!