Отложите загрузку скрипта с атрибутом данных - Pinterest - PullRequest
Новая
       23

Отложите загрузку скрипта с атрибутом данных - Pinterest

0 голосов
/ 11 февраля 2020

У меня есть этот код, и я хочу отложить его загрузку через 10 секунд.

<script async defer data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Я пытался: 

<script>
$(document).ready(function(){
    jQuery.loadScript = function (url, callback) {
        jQuery.ajax({
            url: url,
            dataType: 'script',
            success: callback,
            async: true
        });
    };

    setTimeout(function() {
        $.loadScript("https://assets.pinterest.com/js/pinit.js", function(){
            // Do nothing for now
        });
    }, 10000);
});
</script>

с разными варианты для включения части data-pin-hover = "true", но без какой-либо помощи.

Есть идеи?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 11 февраля 2020

Я думаю, что вы не можете сделать это с помощью ajax метода jQuery, вместо него вы можете создать элемент и добавить к нему свои атрибуты.

В вашем случае: 

$(document).ready(function(){
        function loadScript(src, attributes) {
            // creates a <script> tag and append it to the page
            // this causes the script with given src to start loading and run when complete
            let script = document.createElement('script');
            script.src = src;
            for(const element in attributes) {
                script.setAttribute(element, attributes[element]);
            }
            console.log(script)
            document.body.append(script);
        }

        setTimeout(function() {
            let attributes = {
                    'data-pin-hover' : true,
                    defer: '',
                    async: '',
                }

            loadScript("https://assets.pinterest.com/js/pinit.js", attributes, function(){
                // nothing
            });
        }, 10000);
    });
0 голосов
/ 11 февраля 2020

Готово с jquery и простым js в конце: 

<script>
$(document).ready(function() {
    setTimeout(function () {
        (function(d,s,id){
            var js,fjs = d.getElementsByTagName(s)[0];
            if(d.getElementById(id)){return;}
            js=d.createElement(s);
            js.id=id;
            js.setAttribute("data-pin-hover", true);
            js.src="https://assets.pinterest.com/js/pinit.js";
            fjs.parentNode.insertBefore(js,fjs);
            }(document, "script", "pinterest-x3f")
        );
    }, 10000);
});
</script>
...