index.js
/**
 * Method 1. Asynchronous. Has a better performance but also has an one-frame delay after element is
 * appended (around 25ms delay) of callback triggering.
 * This method is based on CSS3 animations and animationstart event handling.
 * Fires callback once element is appended to the document.
 * @param {HTMLElement} element - Element to be appended
 * @param {function} callback - Append event handler
 */
Method 1. Asynchronous. Has a better performance but also has an one-frame delay after element is
appended (around 25ms delay) of callback triggering.
This method is based on CSS3 animations and animationstart event handling.
Fires callback once element is appended to the document.
@param {HTMLElement} element - Element to be appended
@param {function} callback - Append event handler
Method 1 . Asynchronous . Has a better performance but also has an one - frame delay after element is appended ( around 25ms delay ) of callback triggering . This method is based on CSS3 animations and animationstart event handling . Fires callback once element is appended to the document . @param { HTMLElement } element - Element to be appended @param { function } callback - Append event handler
function onceAppended (element, callback) {
    if (isAppended(element)) {
        callback();
        return;
    }
    let sName = `animation`, pName = ``;
    if ( 
        typeof element.style[sName] === `undefined`
        && (sName = `webkitAnimation`) && (pName = "-webkit-")
            && typeof element.style[sName] === `undefined`
        && (sName = `mozAnimation`) && (pName = "-moz-")
            && typeof element.style[sName] === `undefined`
        && (sName = `oAnimation`) && (pName = "-o-")
            && typeof element.style[sName] === `undefined`
    ) {
        return useDeprecatedMethod(element, callback);
    }
    if (!document.__ONCE_APPENDED) {
        document.__ONCE_APPENDED = document.createElement('style');
        document.__ONCE_APPENDED.textContent = `@${ pName }keyframes ONCE_APPENDED{from{}to{}}`;
        document.head.appendChild(document.__ONCE_APPENDED);
    }
    let oldAnimation = element.style[sName];
    element.style[sName] = `ONCE_APPENDED`;
    element.addEventListener(`animationstart`, () => {
        element.style[sName] = oldAnimation;
        callback();
    }, true);
}
function onceAppended ( element , callback ) { if ( isAppended ( element ) ) { callback ( ) ; return ; } let sName = ` ` , pName = ` ` ; if ( typeof element . style [ sName ] === ` ` && ( sName = ` ` ) && ( pName = "-webkit-" ) && typeof element . style [ sName ] === ` ` && ( sName = ` ` ) && ( pName = "-moz-" ) && typeof element . style [ sName ] === ` ` && ( sName = ` ` ) && ( pName = "-o-" ) && typeof element . style [ sName ] === ` ` ) { return useDeprecatedMethod ( element , callback ) ; } if ( ! document . __ONCE_APPENDED ) { document . __ONCE_APPENDED = document . createElement ( 'style' ) ; document . __ONCE_APPENDED . textContent = ` ${ pName } ` ; document . head . appendChild ( document . __ONCE_APPENDED ) ; } let oldAnimation = element . style [ sName ] ; element . style [ sName ] = ` ` ; element . addEventListener ( ` ` , ( ) => { element . style [ sName ] = oldAnimation ; callback ( ) ; } , true ) ; }
Method 1.
Method 1 .
// since DOMNodeInserted event is deprecated, we will try to avoid using it