да я знаю, что долго грузиться, мне нужны вот эти так сказать приложения, чтобы сделать сайт ещё быстрей..
|
$(window).load(function ()
Может как то через эту функцию jq можно что то придумать? |
Ingiborn,
Не буду напрашиваться - но лечение зубов по фотографии имхо не моё дело - думаю что есть иной подход - посколь задача странная - в обычном режиме не возникает подобного |
<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body id="home-"> <div id="top_block"> <div class="stripe"> <div class="main"> <div class="container_12"> <div class="grid_12"> <div class="header"> <div class="wrapper"> <div> <a class="logo" href="">Главная</a> </div> <div class="log_box extra_wrapper"> </div> <div class="links f_left"></div> </div> </div> <div class="slider_box"> <div class="slider_shadow"> <div id="slider" class="slider"> <a href="a> <a href="a> <a href="a> <a href="a> </div> </div> <a href=""></a> <a href=""></a> </div> <div class="nav" id="menu"> <ul class="menu"> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> </ul> <div class="clear"></div> </div> </div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="main"> <div id="content" class="cont_pad"> <div class="container_12"> <div class="wrapper"> <div class="grid_7"> <div class="wrapper business"> <a href="a> <a href="a> <a href="a> <a href="a> <a href="a> <a href="a> <br /> <br /> <br /> <h1>Текст</h1> <p>Текст</p> </div> </div> <div class="grid_5"> <div class="pad_box"> <form action="" method="post" id="contact-form"> <fieldset> <label class="name"> <input type="text" name="name" value="" /><span class="error">*Неверное имя.</span><span class="empty"></span> </label> <label class="email"> <input type="text" name="email" value="" /><span class="error">*Неверный емейл.</span> <span class="empty"></span> </label> <label class="message"> <textarea cols="" rows="" name="comment"></textarea><span class="error">*Неверный коментарий.</span><span class="empty"></span> </label> <div class="buttons2"> <a id="submit" type="button" class="button"></a> </div> </fieldset> </form> <div id="log"></div> </div> <div class="pad_box"> <div class="testilist"></div> <br /> </div> <div class="pad_box"> <div class="articlelist"></div> <ul class="list2"> <li><a href="">Текст</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="main"> <div id="content-ridge"> <div class="content-wrapper"> <div class="recent-work">Новое</div> <div id="case-study-screenshots"> <img id="stack-position-1" src="" class="case-study-screenshot left-position loading" data-original="image-1" title="" /> <img id="stack-position-2" src="" class="case-study-screenshot active-position loading" data-original="image-2" title="" /> <img id="stack-position-3" src="" class="case-study-screenshot right-position loading" data-original="image-3" title="" /> </div> <div id="case-study-nav"> <a class="button prev" href=""></a> <a class="button next" href=""></a> </div> </div> </div> </div> </div> </div> <script type="text/javascript" charset="utf-8" src="/jquery-1.6.1.min.js"></script> <script type="text/javascript">$(window).load(function(){$.getScript("/jquery-ui.min.js");$.getScript("/jquery.easing.1.3.js");$.getScript("/jquery.cycle.all.min.js");$.getScript("/jquery.lazyload.js");$.getScript("/menu-up-home.js");$.getScript("/compressed.js");$.getScript("/forms.js");$.getScript("/jquery.form.js");});</script> </body> </html> |
Ingiborn,
Этот вариант мало дающий - посколь ссылки на скрипты и стили локальные - реально дебажить тут нечего - если нет своей страницы - к примеру народ ру - выложите действующий макет в песочницу http://learn.javascript.ru/play |
на локальном..
|
разьве никак нельзя допустим изображению с id
<img scr="image-1" id="img1"> задать через какое время изображение должно загрузиться? |
У меня на сайте обычные стандарные jq плагины, menu-up, там меню к шапке прикрепляеться
|
Эта тема будет интересна всем, у кого есть сайт, и тот кто бореться за скорость его загрузки=)
|
Пробуйте так: (Хоть сомневаюсь , что Ваша идея оптимум
<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body id="home-"> <div id="top_block"> <div class="stripe"> <div class="main"> <div class="container_12"> <div class="grid_12"> <div class="header"> <div class="wrapper"> <div> <a class="logo" href="">Главная</a> </div> <div class="log_box extra_wrapper"> </div> <div class="links f_left"></div> </div> </div> <div class="slider_box"> <div class="slider_shadow"> <div id="slider" class="slider"> <a href="a> <a href="a> <a href="a> <a href="a> </div> </div> <a href=""></a> <a href=""></a> </div> <div class="nav" id="menu"> <ul class="menu"> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> </ul> <div class="clear"></div> </div> </div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="main"> <div id="content" class="cont_pad"> <div class="container_12"> <div class="wrapper"> <div class="grid_7"> <div class="wrapper business"> <a href="a> <a href="a> <a href="a> <a href="a> <a href="a> <a href="a> <br /> <br /> <br /> <h1>Текст</h1> <p>Текст</p> </div> </div> <div class="grid_5"> <div class="pad_box"> <form action="" method="post" id="contact-form"> <fieldset> <label class="name"> <input type="text" name="name" value="" /><span class="error">*Неверное имя.</span><span class="empty"></span> </label> <label class="email"> <input type="text" name="email" value="" /><span class="error">*Неверный емейл.</span> <span class="empty"></span> </label> <label class="message"> <textarea cols="" rows="" name="comment"></textarea><span class="error">*Неверный коментарий.</span><span class="empty"></span> </label> <div class="buttons2"> <a id="submit" type="button" class="button"></a> </div> </fieldset> </form> <div id="log"></div> </div> <div class="pad_box"> <div class="testilist"></div> <br /> </div> <div class="pad_box"> <div class="articlelist"></div> <ul class="list2"> <li><a href="">Текст</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="main"> <div id="content-ridge"> <div class="content-wrapper"> <div class="recent-work">Новое</div> <div id="case-study-screenshots"> <textarea style="display:none;"> <img id="stack-position-1" src="" class="case-study-screenshot left-position loading" data-original="image-1" title="" /> <img id="stack-position-2" src="" class="case-study-screenshot active-position loading" data-original="image-2" title="" /> <img id="stack-position-3" src="" class="case-study-screenshot right-position loading" data-original="image-3" title="" /> </textarea> </div> <div id="case-study-nav"> <a class="button prev" href=""></a> <a class="button next" href=""></a> </div> </div> </div> </div> </div> </div> <script type="text/javascript" charset="utf-8" src="/jquery-1.6.1.min.js"></script> <script type="text/javascript">$(window).load(function(){$.getScript("/jquery-ui.min.js");$.getScript("/jquery.easing.1.3.js"); $("#content-ridge textarea").replaceWith($("#content-ridge textarea").val()); $.getScript("/jquery.cycle.all.min.js");$.getScript("/jquery.lazyload.js");$.getScript("/menu-up-home.js");$.getScript("/compressed.js");$.getScript("/forms.js");$.getScript("/jquery.form.js");});</script> </body> </html> |
Спасибо, щас испытаю.
|
$("#content-ridge textarea").replaceWith($("#content-ridge textarea").val());
не понял, а причём тут textarea? |
Или вообще, можно все изображения, которые загружаются через тег <img> отложить их загрузку, допустим на 5 секунд?
типа как через jq, через GetScript? |
Цитата:
Подгружаем контент через 5 сек вместо $("#content-ridge textarea").replaceWith($("#content-ridge textarea").val()) ставим var z='$("#content-ridge textarea").replaceWith($("#content-ridge textarea").val())'; setTimeout(z,5000) |
Не заметил, что они обрамленны в textarea, спасибо, щас попробую.
|
вот, то что надо, а можно за место textarea, другой тег какой-нибудь?
а то в плане оптимизации, это неверно |
С помощью подобных фитч, и ковырянием сервера, при весе страницы в 1.2мб, сайт загружается за 300ms, при соединение в 5-10мбит/сек
|
это без оптимизации языка, не включая кеширование и т.д
|
Ingiborn,
Вы учтите - что после первой загрузки все изо в кеше, и повторной загрузки не производиться Чем не нравицо textarea ? Можно просто засунуть эту часть c картинками в переменную и вставлять cкриптом их в див их обрамления <!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body id="home-"> <div id="top_block"> <div class="stripe"> <div class="main"> <div class="container_12"> <div class="grid_12"> <div class="header"> <div class="wrapper"> <div> <a class="logo" href="">Главная</a> </div> <div class="log_box extra_wrapper"> </div> <div class="links f_left"></div> </div> </div> <div class="slider_box"> <div class="slider_shadow"> <div id="slider" class="slider"> <a href="a> <a href="a> <a href="a> <a href="a> </div> </div> <a href=""></a> <a href=""></a> </div> <div class="nav" id="menu"> <ul class="menu"> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> </ul> <div class="clear"></div> </div> </div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="main"> <div id="content" class="cont_pad"> <div class="container_12"> <div class="wrapper"> <div class="grid_7"> <div class="wrapper business"> <a href="a> <a href="a> <a href="a> <a href="a> <a href="a> <a href="a> <br /> <br /> <br /> <h1>Текст</h1> <p>Текст</p> </div> </div> <div class="grid_5"> <div class="pad_box"> <form action="" method="post" id="contact-form"> <fieldset> <label class="name"> <input type="text" name="name" value="" /><span class="error">*Неверное имя.</span><span class="empty"></span> </label> <label class="email"> <input type="text" name="email" value="" /><span class="error">*Неверный емейл.</span> <span class="empty"></span> </label> <label class="message"> <textarea cols="" rows="" name="comment"></textarea><span class="error">*Неверный коментарий.</span><span class="empty"></span> </label> <div class="buttons2"> <a id="submit" type="button" class="button"></a> </div> </fieldset> </form> <div id="log"></div> </div> <div class="pad_box"> <div class="testilist"></div> <br /> </div> <div class="pad_box"> <div class="articlelist"></div> <ul class="list2"> <li><a href="">Текст</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="main"> <div id="content-ridge"> <div class="content-wrapper"> <div class="recent-work">Новое</div> <div id="case-study-screenshots"><!-- Cюда вставим! --></div> <div id="case-study-nav"> <a class="button prev" href=""></a> <a class="button next" href=""></a> </div> </div> </div> </div> </div> </div> <script type="text/javascript" charset="utf-8" src="/jquery-1.6.1.min.js"></script> <script type="text/javascript">$(window).load(function(){$.getScript("/jquery-ui.min.js");$.getScript("/jquery.easing.1.3.js"); var ImgArray='\ <img id="stack-position-1" src="a.png" class="case-study-screenshot left-position loading" data-original="image-1" title="" />\ <img id="stack-position-2" src="b.png" class="case-study-screenshot active-position loading" data-original="image-2" title="" />\ <img id="stack-position-3" src="c.png" class="case-study-screenshot right-position loading" data-original="image-3" title="" />\ '; $("#case-study-screenshots").html(ImgArray); $.getScript("/jquery.cycle.all.min.js");$.getScript("/jquery.lazyload.js");$.getScript("/menu-up-home.js");$.getScript("/compressed.js");$.getScript("/forms.js");$.getScript("/jquery.form.js");});</script> </body> </html> |
Цитата:
2. Не очень понял, как. |
Всё что внутри тега textarea не индексируется поисковыми система, и не учитывается при ранджирование
|
Ingiborn,
Ну гугл индексирует всё - а Вы и так вынули src - чему там индексировацо ? 2. оберните картинки в теги <а> с href= их ссылок - при загрузке можно ссылки из href перегружать в src |
Он индексирует, но при ранджирование текст в textarea он не учитывает..
Это не полностью весь хтмл код, он почистен с помощью регулярных выражений, там конечно же есть a href и src в img. Надо как-то избавиться от textarea.. Можно допустим всё это в div с идентификатором обернуть? Я попробывал, скрипт не схватил |
Ingiborn,
Вы можете вставить так <img id="stack-position-1" src="" data_src="aaaa.png" class="case-study-screenshot left-position loading" data-original="image-1" title="" /> далее на этапе подгрузки присваиваем src значение data_src |
У меня три слайдера, вверху ещё есть #slider
|
это у меня карусель
|
поскольку её невидно при загрузке страницы, я её сделал через lazyload
|
Ingiborn,
Все таки лучше для поисковиков - одеть картинки в теги <a> (Пусть там ранее еще одни - на них забить) и затем эти теги перепарсить в src |
не пойму, как, можно пример?
можно на примире: <ul id="slider"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> |
Цитата:
<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body id="home-"> <div id="top_block"> <div class="stripe"> <div class="main"> <div class="container_12"> <div class="grid_12"> <div class="header"> <div class="wrapper"> <div> <a class="logo" href="">Главная</a> </div> <div class="log_box extra_wrapper"> </div> <div class="links f_left"></div> </div> </div> <div class="slider_box"> <div class="slider_shadow"> <div id="slider" class="slider"> <a href="a> <a href="a> <a href="a> <a href="a> </div> </div> <a href=""></a> <a href=""></a> </div> <div class="nav" id="menu"> <ul class="menu"> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> <li><a href="">Текст</a></li> </ul> <div class="clear"></div> </div> </div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="main"> <div id="content" class="cont_pad"> <div class="container_12"> <div class="wrapper"> <div class="grid_7"> <div class="wrapper business"> <a href="a> <a href="a> <a href="a> <a href="a> <a href="a> <a href="a> <br /> <br /> <br /> <h1>Текст</h1> <p>Текст</p> </div> </div> <div class="grid_5"> <div class="pad_box"> <form action="" method="post" id="contact-form"> <fieldset> <label class="name"> <input type="text" name="name" value="" /><span class="error">*Неверное имя.</span><span class="empty"></span> </label> <label class="email"> <input type="text" name="email" value="" /><span class="error">*Неверный емейл.</span> <span class="empty"></span> </label> <label class="message"> <textarea cols="" rows="" name="comment"></textarea><span class="error">*Неверный коментарий.</span><span class="empty"></span> </label> <div class="buttons2"> <a id="submit" type="button" class="button"></a> </div> </fieldset> </form> <div id="log"></div> </div> <div class="pad_box"> <div class="testilist"></div> <br /> </div> <div class="pad_box"> <div class="articlelist"></div> <ul class="list2"> <li><a href="">Текст</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="main"> <div id="content-ridge"> <div class="content-wrapper"> <div class="recent-work">Новое</div> <div id="case-study-screenshots"> <a href="a1"><img id="stack-position-1" src="" class="case-study-screenshot left-position loading" data-original="image-1" title="" /></a> <a href="a2"><img id="stack-position-2" src="" class="case-study-screenshot active-position loading" data-original="image-2" title="" /></a> <a href="a3"><img id="stack-position-3" src="" class="case-study-screenshot right-position loading" data-original="image-3" title="" /></a> </div> <div id="case-study-nav"> <a class="button prev" href=""></a> <a class="button next" href=""></a> </div> </div> </div> </div> </div> </div> <script type="text/javascript" charset="utf-8" src="/jquery-1.6.1.min.js"></script> <script type="text/javascript">$(window).load(function(){$.getScript("/jquery-ui.min.js");$.getScript("/jquery.easing.1.3.js"); $("#case-study-screenshots a > img").parent().each(function() { var Thsrc= $(this).attr("href"); var img = $(this).find("img"); $(this).replaceWith(img);img.attr("src",Thsrc) }); $.getScript("/jquery.cycle.all.min.js");$.getScript("/jquery.lazyload.js");$.getScript("/menu-up-home.js");$.getScript("/compressed.js");$.getScript("/forms.js");$.getScript("/jquery.form.js");});</script> </body> </html> заменяю src на HREF в прилегающих(непосредствен о к картинке) тегах <a> и удаляю эти теги, если будет еще одно обрамление в теги <a> - оно остаёцо |
Цитата:
|
Ingiborn,
Я дал пример - смотрите пост 70 по идее у Вас будет в итоге изначально так <ul id="slider"> <li><a href=""><a href="a1.png"><img src=""/></a></a></li> <li><a href=""><a href="a2.png"><img src=""/></a></a></li> <li><a href=""><a href="a3.png"><img src=""/></a></a></li> </ul> |
у меня почему то после изменений удаляет теги <img> и всё
|
Ingiborn,
Поставьте код как есть - я проверял! потом обрамите дополнительными тегами <A> </A> Проверьте Потом обрамите доп тегами <li></li> Проверьте |
Ну да, на обрамил <li>
Так работает, но два тега а на один элемент нельзя... Может всё таки можно что-то придумать за место textarea, заменить каким нибудь другим тегом <div> с идентификатором? Я конечно тебе и так благодарен Дефф, и хочу отблагодарить, но в личке я тебя так и не увидел.. |
Цитата:
|
Так то можно, но по стандарту нельзя
|
даже браузерный валидатор говорит что два тега a на один элемент нельзя=)
|
Цитата:
когда ссылку из одного атрибута - переносим в иной - вот и вся загрузка, там картинки как стояли - так и будут стоять - и обрамлять не надо в div - изо с прописанным src загружается как ни в чем не бывало - единственные теги без загрузки контента textarea и комменты (но комменты не парсяцо в ИE |
можно пример?
|
Часовой пояс GMT +3, время: 07:07. |