Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML standby Attribute

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 27 - Views
⏳ 4 mins
💬 1 Comment
HTML standby Attribute

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
Copy To Clipboard
<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
Copy To Clipboard
<!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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy