Does defer.js can solve the DOM problem?

[bloggerbangladesh]

A custom blockquote I created has automatically added a copy button, Facebook share button, WhatsApp button, and Twitter button. Each button is added automatically via Raw JavaScript. A blockquote has a total of 9 HTML classes. Thus when I add 100 blockquotes or more blockquotes to a post, numerous DOMs are created. And Google PageSpeed ​​Insights then the page speed decreases because of that DOM.

In this case, defer.js can solve the DOM problem of the blockquote I created. If it can be solved using defer.js then please let me know the solution.

document.addEventListener('DOMContentLoaded', function() {
var blockquotes = document.querySelectorAll('blockquote');

blockquotes.forEach(function(blockquote) {
    var btnContainer = document.createElement('div');
    btnContainer.className = 'bqt-btn-container';

    // Function to get only the text content of the blockquote
    function getTextContent(element) {
        return Array.from(element.childNodes)
            .filter(function(node) {
                return node.nodeType === Node.TEXT_NODE;
            })
            .map(function(node) {
                return node.textContent.trim();
            })
            .join('');
    }

    // Function to create a button with an SVG icon and color class
    function createButton(ariaLabel, iconId, colorClass) {
        var btn = document.createElement('button');
        btn.setAttribute('aria-label', ariaLabel);
        btn.className = 'bqt-btn ' + colorClass;
        if (ariaLabel === 'Copy Text') {
            btn.innerHTML = `Copy <svg class="icon" aria-hidden="true" width="16" height="16"><use href="#${iconId}"></use></svg>`;
        } else {
            btn.innerHTML = `<svg class="icon" aria-hidden="true" width="16" height="16"><use href="#${iconId}"></use></svg>`;
        }
        return btn;
    }

    // Copy button
    var copyBtn = createButton('Copy Text', 'i-copy', 'bqt-copy');
    copyBtn.addEventListener('click', function() {
        var textToCopy = getTextContent(blockquote);
        var temp = document.createElement('textarea');
        document.body.appendChild(temp);
        temp.value = textToCopy;
        temp.select();
        document.execCommand('copy');
        document.body.removeChild(temp);
        copyBtn.innerHTML = `Copied <svg class="icon" aria-hidden="true" width="16" height="16"><use href="#i-copied"></use></svg>`;
        setTimeout(function() {
            copyBtn.innerHTML = `Copy <svg class="icon" aria-hidden="true" width="16" height="16"><use href="#i-copy"></use></svg>`;
        }, 2000); // Reset the button text after 2 seconds
    });
    btnContainer.appendChild(copyBtn);

    // Facebook share button
    var fbBtn = createButton('Facebook Share', 'i-fb', 'bqt-fb');
    fbBtn.addEventListener('click', function() {
        var textToShare = getTextContent(blockquote);
        var url = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href) + '&quote=' + encodeURIComponent(textToShare);
        window.open(url, '_blank');
    });
    btnContainer.appendChild(fbBtn);

    // WhatsApp share button
    var waBtn = createButton('WhatsApp Share', 'i-wa', 'bqt-wa');
    waBtn.addEventListener('click', function() {
        var textToShare = getTextContent(blockquote);
        var url = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(textToShare);
        window.open(url, '_blank');
    });
    btnContainer.appendChild(waBtn);

    // Twitter share button
    var twBtn = createButton('Twitter Share', 'i-tw', 'bqt-tw');
    twBtn.addEventListener('click', function() {
        var textToShare = getTextContent(blockquote);
        var url = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(textToShare);
        window.open(url, '_blank');
    });
    btnContainer.appendChild(twBtn);

    blockquote.appendChild(btnContainer);
});

});

[shinsenter]

Hello @bloggerbangladesh

I don't completely understand the context of the issue you're facing. To lazy load DOM elements on the website, I think you can use the Defer.dom() utility, and the code might look like this:

Defer.dom('blockquote', 500, 'lazyloaded', function (blockquote) {
    var textToShare = getTextContent(blockquote);
    var btnContainer = document.createElement('div');

    btnContainer.className = 'bqt-btn-container';

    // add the element to the blockquote
    blockquote.appendChild(btnContainer);

    // Function to get only the text content of the blockquote
    function getTextContent(element) {
        return Array.from(element.childNodes)
            .filter(function (node) {
                return node.nodeType === Node.TEXT_NODE;
            })
            .map(function (node) {
                return node.textContent.trim();
            })
            .join('');
    }

    // Function to create a button with an SVG icon and color class
    function createButton(ariaLabel, iconId, colorClass, callback) {
        var btn = document.createElement('button');
        btn.setAttribute('aria-label', ariaLabel);
        btn.className = 'bqt-btn ' + colorClass;

        if (ariaLabel === 'Copy Text') {
            btn.innerHTML = `Copy <svg class="icon" aria-hidden="true" width="16" height="16"><use href="#${iconId}"></use></svg>`;
        } else {
            btn.innerHTML = `<svg class="icon" aria-hidden="true" width="16" height="16"><use href="#${iconId}"></use></svg>`;
        }

        if (callback) {
            btn.onclick = callback;
        }

        btnContainer.appendChild(btn);

        return btn;
    }

    // Copy button
    createButton('Copy Text', 'i-copy', 'bqt-copy', function (event) {
        var textToCopy = getTextContent(blockquote);
        var temp = document.createElement('textarea');
        document.body.appendChild(temp);
        temp.value = textToCopy;
        temp.select();
        document.execCommand('copy');
        document.body.removeChild(temp);
        event.target.innerHTML = `Copied <svg class="icon" aria-hidden="true" width="16" height="16"><use href="#i-copied"></use></svg>`;
        setTimeout(function () {
            event.target.innerHTML = `Copy <svg class="icon" aria-hidden="true" width="16" height="16"><use href="#i-copy"></use></svg>`;
        }, 2000); // Reset the button text after 2 seconds
    });

    // Facebook share button
    createButton('Facebook Share', 'i-fb', 'bqt-fb', function () {
        var url = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href) + '&quote=' + encodeURIComponent(textToShare);
        window.open(url, '_blank');
    });

    // WhatsApp share button
    createButton('WhatsApp Share', 'i-wa', 'bqt-wa', function () {
        var url = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(textToShare);
        window.open(url, '_blank');
    });

    // Twitter share button
    createButton('Twitter Share', 'i-tw', 'bqt-tw', function () {
        var url = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(textToShare);
        window.open(url, '_blank');
    });
});

Note: I can't test your code to see if it works because I don't have the specific HTML structure of the website you're using

[shinsenter]

Hi @bloggerbangladesh

Have you reviewed my response? I hope you are still interested in exploring this library and that my answer can resolve your issue.

If there is no response within a week, I will close this discussion.