New Technology of image replacement state domain method_javascript skills

Developers familiar with css must know the image Replacement Technology and Its Significance. DaveShea once summarized this in a previous article. For more information, see Dave Shea's excellent summary, after analyzing The advantages and disadvantages of all existing methods, Paul Young proposed a new method and named it The StateMethod ), this article will introduce in detail the principles of this method:

This method checks whether the image is disabled. It is not a request to the image on the server, because this will cause an additional http request. The author created a clever method.

In most browsers, the Image object can be instantiated and traced back to an invalid URL (http: // 0), which is easy to detect the Image status. If disabled, the onerror event is triggered. At the beginning of the js file, j creates a new image object:

var img = new Image();

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

If (img. style. constraint binding! = 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. enablestat.pdf ("images-on", true );
}
}

Another challenging browser is safari. If the request is an invalid URL, an error message will be displayed in the safari status bar, but the page layout is not affected. If the user's status bar is enabled, the error will continue, which is not professional. Likewise, the author has studied another feasible solution. If the Image is from a 1*1 gif Image and is encoded by data. If the Image is disabled, its width is 0, and the following is a test in safari:

Else
{
Img.style.css Text = "-webkit-opacity: 0 ";
If (img. style. webkitOpacity = 0)
{
Img. onload = function ()
{
Document. enablestat.pdf ("images-on", img. width> 0 );
}
Img. src =
"Data: image/gif; base64," +
"R0lGODlhAQABAIAAAP // wAAACH5BAE" +
"AAAAALAAAAAABAAEAAAICRAEAOw = ";
}
}

Finally, for other browsers, when initializing 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";
}

Status domains can be switched.

You can create a system for users to switch between text and alternative images.

View examples (the sample file is provided by Paul Young)

The main reason for adding the class attribute to html rather than the body or other sub-elements is that the body needs to be fully loaded before the image is replaced. If "image-on" is not added to html. When the status domain is enabled, a flash occurs.

Image replacement technology is a very important part of css. In view of the shortcomings of the existing image replacement technology, the author takes a lot of time to find a new path, the method is unique, it is worth learning.

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

Original translated text:Http://www.denisdeng.com /? P = 235

Original ENGLISH: Http://www.sitepoint.com/article/image-replacement-state-scope/