HTML standby Attribute

Posted in HTML Tutorial

Updated on Oct 29, 2024

By Mari Selvan

👁️ 30 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The standby attribute is an attribute used in HTML with the <object> element. Although it is not widely used or supported in modern browsers, it was originally intended to provide a message that would be displayed while the object is loading.

Understanding deprecated or less common attributes like standby can be useful for maintaining legacy code or understanding the evolution of web standards.

🎯 Purpose of standby

The standby attribute was designed to enhance user experience by displaying a message while an embedded object (such as an image, video, or other media) is loading. This could inform users that content is being loaded and improve the perceived performance of a web page.

💎 Values

The standby attribute accepts a string value, which is the text message to be displayed while the object is loading. Here is a basic example:

index.html

Copied

<object data="example.swf" type="application/x-shockwave-flash" standby="Loading, please wait...">
  <p>Your browser does not support embedded objects.</p>
</object>

🧠 How it Works

In this example, the message "Loading, please wait..." would be shown to users while the Flash object is being loaded.

📄 Implementation Example:

Since the standby attribute is not widely supported, it is often better to use other methods, such as JavaScript, to achieve similar functionality. However, here is how it would be used in an HTML document:

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Standby Attribute Example</title>
</head>
<body>
  <object data="example-video.mp4" type="video/mp4" standby="Video is loading...">
    <p>Your browser does not support embedded videos.</p>
  </object>
</body>
</html>

🔄 Dynamic Values with JavaScript

To achieve a similar effect dynamically with JavaScript, you can manipulate the DOM to display a loading message while content is being fetched or loaded. Here's an example:

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Standby Example</title>
  <style>
    #loadingMessage {
      display: none;
      font-size: 1.2em;
      color: #555;
    }
  </style>
</head>
<body>
  <div id="loadingMessage">Loading content, please wait...</div>
  <object id="dynamicObject" data="" type="video/mp4">
    <p>Your browser does not support embedded videos.</p>
  </object>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var loadingMessage = document.getElementById("loadingMessage");
      var dynamicObject = document.getElementById("dynamicObject");
      
      loadingMessage.style.display = "block";
      dynamicObject.data = "example-video.mp4";
      
      dynamicObject.onload = function() {
        loadingMessage.style.display = "none";
      };
    });
  </script>
</body>
</html>

🧠 How it Works

In this script, a loading message is displayed when the page loads and is hidden once the object has finished loading.

🏆 Best Practices

Given that the standby attribute is deprecated and not widely supported, it is advisable to use JavaScript or CSS for displaying loading messages.
Always test your solutions across different browsers to ensure compatibility and a smooth user experience.
Use semantic HTML and ARIA roles to ensure accessibility when providing dynamic loading messages.

🎉 Conclusion

The standby attribute, while not commonly used today, was designed to enhance the user experience by displaying a message while content is loading. In modern web development, similar functionality can be achieved using JavaScript and CSS, providing more control and better compatibility across browsers.

Understanding attributes like standby helps in maintaining legacy code and appreciating the evolution of HTML standards.