Determining whether the browser supports CSS3 has initially explored JS inertia loading

Determining whether the browser supports CSS3 has initially explored JS inertia loading

Share a function that determines whether the browser supports it, And then involves the concept of lazy loading.

 

var iscss3=(function(){            var _style=document.createElement(div).style;            return 'transition' in _style||'mozTransition' in _style||'webkitTransition' in _style;        })()

What is inert loading? Like JavaScript and CSS, many browser attributes and methods are incompatible and require a large number of branches for compatibility.

For example, bind common events:

 

function addEvent (type, element, fun) {    if (element.addEventListener) {        element.addEventListener(type, fun, false);    }    else if(element.attachEvent){        element.attachEvent('on' + type, fun);    }    else{        element['on' + type] = fun;    }}

Every time we run it, we need to make branch judgments, so the performance will not be high. If this is the case, use an anonymous function in combination with a function expression. It will become lazy.

 

 

var addEvent = (function () {    if (document.addEventListener) {        return function (type, element, fun) {            element.addEventListener(type, fun, false);        }    }    else if (document.attachEvent) {        return function (type, element, fun) {            element.attachEvent('on' + type, fun);        }    }    else {        return function (type, element, fun) {            element['on' + type] = fun;        }    }})();

In this way, the correct function will be assigned to the variable once it is executed.