Забыли пароль?
Запросите новый здесь.

Автор темы: yury
ID темы: 1198
Информация:
Тема содержит 16 сообщения, была просмотрена 4304 раз.
Просмотр темы
PHP-Fusion Russia » Поддержка 7 версии » Пожелания и предложения
 Распечатать тему
Подключить lazyload.js к php-fusion? Ускоряем загрузку
yury
Собственно попробовал стандартным способом прописать в header.php скрипт

Загрузить источник  GeSHi: PHP
  1.  
  2. echo "<script type='text/javascript' src='".INCLUDES."jquery/jquery.lazyload.js?v=1.8.3'></script>\n";
  3.  
  4. echo '<script type="text/javascript" charset="utf-8">
  5. $(function() {
  6. $("img").lazyload({
  7. placeholder : "images/grey.gif",
  8. effect : "fadeIn"
  9. });
  10. });
  11. </script>';
Добавлено за 0.045 секунд, используя GeSHi 1.0.8.10


но все равно все картинки подгружаются сразу без эффекта появления.

в чем может быть причина?
 
mishqa35
Все просто, картинки должны иметь вот такой вид
Скачать исходники  Код
<img src="grey.gif" data-original="example.jpg">



grey.gif - прозрачная гифка
example.jpg - картинка которая подгружается
 
Web
yury
о, и точно. это ж скока надо переписать материалов, чтобы картинки поставить такими)
 
yury
mishqa35 написал:

Все просто, картинки должны иметь вот такой вид
Скачать исходники  Код
<img src="grey.gif" data-original="example.jpg">



grey.gif - прозрачная гифка
example.jpg - картинка которая подгружается


хотя если посмотреть на вордпрессе, то там картинки нормального формата. значит есть еще какой то метод)
 
yury
нашел как побороть. прописываем вместо оригинального скрипта на этот

Загрузить источник  GeSHi: Javascript
  1. (function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
  2. var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
  3. this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
  4. if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
  5. self.loaded=false;}else{self.loaded=true;}
  6. $(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))
  7. [settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}
  8. return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}
  9. return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;}
  10. return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}
  11. return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.expr[':'],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);
Добавлено за 0.011 секунд, используя GeSHi 1.0.8.10


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

а то например те же смайлики тоже не показываются при открытии если не шевельнуть мышой вниз)
 
mishqa35
и на много часов загрузка сайта уменьшилась? :)
А по теме то можно сделать наоборот, чтобы ефект работал на картинках с определенным стилем, а на обычных нет.

$("img .class_image").lazyload({..
И ефект будет на всех елементах с <img ... class='class_image'...>
 
Web
Polarfox
В куари есть вроде и логическое NOT, один хрен по дому бродит.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
 
Web
yury
mishqa35 написал:

и на много часов загрузка сайта уменьшилась? ab
А по теме то можно сделать наоборот, чтобы ефект работал на картинках с определенным стилем, а на обычных нет.

$("img .class_image"ad.lazyload({..
И ефект будет на всех елементах с <img ... class='class_image'...>


так для фоток уже класс лайтбокса прописан, для открытия во всплывающем окне) так что не подойдет)) да и переписывать все статьи и новости как то не вариант)

а вот чтобы не применять к определенным пикчам это было бы самое то)
 
yury
и на много часов загрузка сайта уменьшилась? ab

помнишь в аське я тебе писал что у меня на хостере ограничение на большое коилчество коннектов, в связи с чем не все фотки грузились. вот этот скрипт решил эту проблему и фотки теперь все видны при прочтении)
 
yury
PolarFox можешь подсказать как исключить картинки с классом noimg из обработки скриптом? сам скрипт выше в сообщении. а то чет не допру
 
Polarfox
http://api.jquery...
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
 
Web
yury
а как применить в коде

<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
});
</script>


?
 
Polarfox
Оффтопик Перефразируя "а перепиши весь код чтобы работало, вот как ты сказал", ты просил подсказку - я дал подсказку, оказалось зря...


$("img").not('.noimg')

не проверял, пробуй.

там есть еще вариант, выражение внутри, а не последовательно, хз может и одинакового по скорости.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
 
Web
yury
вы гений, сэр)
 
Polarfox
Сам тащусь,
просто посмотри синтаксис квери, он не так уж сложен, селекторы тебе будут нужны наверно весь "контрольный пакет" времени, а остальные закидоны жабаскриптного ооп поймешь со временем и необходимостью.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
 
Web

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум: