Загрузка JavaScripts и CSS последним делом

вопрос

Ребята, помогите пожалуйста решить проблему этакую:
У меня очень сложный шаблон, хочу сделать загрузку javascripts и css в конце файла main.tpl
Из-за того, что вначале у меня грузятся скрипты и css, страница очень долго загружается.

Собственно вопрос:
Как можно подключить скрипты и css после прогрузки файлов шаблона(картинки, анимации, код) ?

На данный момент шапка main.tpl выглядит так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
{headers}
<meta name="robots" content="index,nofollow" />
</head>
<body class="pagebg">{AJAX}
<link media="screen" href="{THEME}/css/main.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/css/engine.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/css/jquery.tabs.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/sdvijenie.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.tabs.pack.js"></script>
<script type="text/javascript" src="{THEME}/js/tooltip.js"></script>
<script type="text/javascript" src="{THEME}/js/reiting.js"></script>
<script type="text/javascript" src="{THEME}/js/tabs.js"></script>
<script type="text/javascript" src="{THEME}/js/upSvK.js"></script>
  <div id="loading-layer" style="display:none;font-family: Verdana;font-size: 11px;width:200px;height:50px;background:#FFF;padding:10px;text-align:center;border:1px solid #000"><div style="font-weight:bold" id="loading-layer-text"><font color="#CC0000">Загрузка.</font> <p> <font color="#CC0000">Пожалуйста, подождите...</font></div><br /><img src="/engine/ajax/loading.gif" tppabs="/engine/ajax/loading.gif"  border="0" alt="" /></div>
<div id="busy_layer" style="visibility: hidden; display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: gray; opacity: 0.1; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=10)'; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10); "></div>
<script type="text/javascript" src="engine/classes/highslide/highslide.js"></script>
<script type="text/javascript">    
    hs.graphicsDir = '/engine/classes/highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.numberOfImagesToPreload = 0;
    hs.showCredits = false;
    hs.lang = {
        loadingText :     'Загрузка...',
        fullExpandTitle : 'Развернуть',
        restoreTitle :    'Кликните для закрытия картинки',
        focusTitle :      'Фокус',
        loadingTitle :    'отмена'
    };
</script>
<table width="100%">
  <tr>
......

Спасибо большое !

Ответил: frizoro

Ответ на твой вопрос расписан - тут и тут

4 комментария

Юзер

102

RadarWeb - 2015-03-2313 февраля 2014 21:41 - #23460

В данной ситуации не стоит думаю делать загрузку после. Лучше включить сжатие шаблонов и воспользоваться встроенной в ДЛЕ минимизацией цсс и яс и тогда все будет грузиться гораздо быстрее.

Юзер

llsjll - 2015-03-2313 февраля 2014 21:45 - #23461

RadarWeb, я понимаю, но допустим есть два скрипта, которые не повлияют на работу особо сайта, но их можно и в последнюю очередь загрузить, как это сделать хотя бы для 2-ух скриптов?

-----
Спасибо за твой отзыв, попробую минимизировать их.

Юзер

102

RadarWeb - 2015-03-2313 февраля 2014 22:13 - #23463

Тогда копай в сторону $.getScript и $.requireScript внутри

$(document).ready(function() {
});

но это для js, а можно например и так

$(document).ready(function() {
    $('head').append('<link href="style.css" type="text/css" rel="stylesheet" />');
    });

Это уже и для js и для css.

В общем-то вариантов уйма

Юзер

Nick - 2015-03-2313 февраля 2014 23:33 - #23467

1) Постараться минимизировать число js & css:
a) те, которые возможно, грузить с открытых cdn (google, yandex) (читать тут https://dle-faq.ru/faq/jquery/2227-budet-li-rabotat-moduli-esli-podklyuchit-jquery-ot-google.html), грузите с cdn.
b) по возможности собрать код в 1 (2,3 … как можно меньше) число подгружаемых файлов.

2) Некоторые js можно вынести в самый конец, перед закрытием body, тут сами экспериментируйте.

3) Можно поиграться с async & defer и Lazy Loading Asyncronous javascript (например, http://bryk.ru/blog/seo/asynchronous-javascript.html).

Лучше включить сжатие шаблонов и воспользоваться встроенной в ДЛЕ минимизацией цсс и яс и тогда все будет грузиться гораздо быстрее.

Сам пользовался как-то таким подключением. Однако, в последствии отказался.
Почему?
Считаю лишним "дергать" php при таких запросах.