New technology for image replacement: state domain method_javascript skills

See Dave Shea's excellent summary, Paul Young , after analyzing the advantages and disadvantages of all existing methods, proposed a new method and named it "state domain method" ( The StateMethod), this article will introduce the principle of this method in detail:

This method checks whether the image is disabled, rather than requesting the image on the server, because that will cause an additional http request. The author has created an ingenious approach.

In most browsers, the Image object can be instantiated and traced back to an invalid URL (http://0), making it easy to detect the status of the Image. If disabled, the onerror event will fire and create a new image object at the beginning of the js file:

<font face="NSimsun">var img = new Image();</font>

However, there are two weird browsers that are not compatible with this method. In the Gecko browser, regardless of whether Image is disabled. Onerror event is always triggered. Fortunately, there is another feasible solution to solve this problem - attach an invalid background image to the html element, and then obtain the style attribute through the getComputedStyle method. If the Image is disabled, its attribute is none or url(invalid-url:):

if (img.style.MozBinding != null)
{
img.style.backgroundImage = "url(" document.location.protocol "//0)";
var bg = window .getComputedStyle(img,'').backgroundImage;

if (bg != "none" && bg !="url(invalid-url:)" || document.URL.substr(0, 2) == "fi")
{
document.enableStateScope("images-on", true);
}
}<font face="NSimsun"> </font>

Another challenging browser is Safari. If the request is an invalid URL, an error message will appear in Safari's status bar, but the page layout will not be affected in any way. If the user's status bar is turned on, the error will continue, which is very unprofessional. Similarly, the author has studied another feasible solution. If the Image comes from a 1*1 gif image and is encoded by data. If the Image is disabled, its width will be 0, as tested in Safari:

else
{
img.style.cssText ="-webkit-opacity:0";
if (img.style.webkitOpacity == 0)
{
img.onload = function()
{
document.enableStateScope("images-on", img.width > 0);
}
img.src =
"data:image/gif; base64,"
"R0lGODlhAQABAIAAAP///wAAACH5BAE"
"AAAAALAAAAAABAAEAAAICRAEAOw==";
}
}<font face="NSimsun"> </font>

Finally, for other browsers, when starting to initialize the Image object, you only need to test the onerror trigger event.

   else
   {
     img.onerror = function(e)
     {
      document.enableStateScope("images-on", true);
     }
     img.src = "about:blank";
   }

The status field can be switched

It is possible to create a system for users to switch between text and alternative images.

View example (example file provided by Paul Young)

The class attribute is added to the html instead of the body or other sub-elements. The main reason is that the body needs to be fully loaded before the image is replaced. If "image-on" is not added above the html. When the status field is enabled, a flash will occur.

Image replacement technology is a very important part of CSS. In view of the shortcomings of existing image replacement technology, the author spent a lot of time to find a new approach. The method is unique and worth learning from.

Sample download: tate-scope-image-replacement.zip

Original translation: http://www.denisdeng.com/?p=235

English original text: http://www.sitepoint.com/article/image-replacement-state-scope/