Отложенная загрузка скрипта при скроле или с фиксированной задержкой

Рейтинг: 1Ответов: 0Опубликовано: 13.01.2023

В одном файле php есть два блока, которые отвечают за работу компонента на уровне js

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
function include(url) {
        var script = document.createElement('script');
        script.src = url;
        document.getElementsByTagName('body')[0].appendChild(script);
        }
    
    include("/components/com_jlexcomment/assets/tribute.min.js");   
    include("/components/com_jlexcomment/assets/cropper.min.js");
    include("/components/com_jlexcomment/assets/script.js");
});

И второй блок, который содержит переменные php и как я понимаю jquerry

<script type="text/javascript">
(function($)
{
    $(document).ready(function()
    {
        var jlexcm = new jlexcomment(jQuery,{
            key : '<?php echo $this->cmConfig->key; ?>',
            sort : '<?php echo $this->config->def('sort','best') ?>',
            box : '#jlexcomment',
            timestamp : <?php echo $this->cmConfig->timestamp; ?>,
            request : '<?php echo $this->cmConfig->request; ?>',
            id : <?php echo $this->data->hl; ?>,
            page_comment : <?php echo $this->data->page; ?>
        }, 
        {
            emoticons : <?php echo json_encode($this->emoticons) ?>,
            peoples : <?php echo ($this->config->get('u_mention')==true) ? json_encode ($this->peoples) : '[]' ?>,
            member : <?php echo $this->user->guest ? '0' : '1' ?>,
            url : '<?php echo JUri::base() . $this->data->object->url; ?>',
            cm_min_length : <?php echo $this->config->def('min_cm_length',0); ?>,
            cm_max_length : <?php echo $this->config->def('max_cm_length',0); ?>,
            profile: <?php echo $this->config->def("profile_3rd","jlexcomment")=="jlexcomment"?1:0 ?>,
            media : <?php echo $this->config->def("jcm_layout_media",1)==1?1:0; ?>,
            translate : <?php echo $this->data->translate; ?>,
            email_verify : <?php echo $this->config->def("email_verify",0)==1?1:0; ?>,
            refresh : <?php echo $this->data->object->get("live",0); ?>,
            sticker_autopost : <?php echo $this->config->def("sticker_auto",1); ?>,
            readmore: <?php echo $this->config->def("cm_collapse",1)==1?1:0 ?>,
            reactions: <?php echo $this->reactionConfig ?>,
            styles: <?php echo json_encode($this->styles) ?>,
            author_name: '<?php echo $this->config->def ('author_name','screen_name')=='screen_name'?1:0 ?>',
        });

        jlexcm.init();
    })
})(jQuery);
</script>

Как видно из кода для работы компонента требуется подключение трех файлов js . Компонент отвечает за вывод формы комментариев и, соответственно, загрузку js можно отложить, либо до того момента пока пользователь не прокрутит до блока с формой. или установить фиксированную задержку ms

Если поменять последовательность блоков, в том виде, как они выглядят сейчас, то на функционал компонента это не оказывает влияние

Я сделал подключение через include файлов js, которые подключались изначально в head средствами php (первый блок)

Такой вариант работает. Но стоит задача отложить загрузку скриптов. В идеале сделать подключение скриптов при скролле до определённого элемента. Но я столкнулся с проблемой. Даже при попытке сделать задержку на 300 мс js перестаёт работать.

Использование setTimeout() даже при нулевых значениях выводит из строя работу скриптов, хотя с другими скриптами все работает.

Я попытался снизить влияние за счет window.addEventListener("load", function() , но работает только document.addEventListener("DOMContentLoaded", function()

Возможно есть другие варианты, которые позволяют подключить эти скрипты. Возможно есть вариант включить другим способом js файлы в один общий блок с jQuerry и установить общую задержку подключения для всего блока или подключение при достижении, скажем, custom_div

В js очень слабый, буду благодарен за любую помощь!

Ответы

Ответов пока нет.