Отложенная загрузка скрипта при скроле или с фиксированной задержкой
В одном файле 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
очень слабый, буду благодарен за любую помощь!