VPF::загрузка картинки в кэш при перемещении курсора

gcc

Дата 27.12.2010, 10:04 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

нужно вывести на страницу в вертикальной и в горизонтальной прокрутке 20-100 картинок превью по 4-7кб

хотел спросить и интересно:
можно ли прокручивать бегунок и в кеш браузера вставлять эти картинки тогда когда эту картинку видно при прокрутке?

Это сообщение отредактировал(а) gcc - 14.1.2011, 00:38

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

ayax2005

Дата 27.12.2010, 16:58 (ссылка)

(нет голосов)

Загрузка ...

echo $smile

Профиль
Группа: Участник
Сообщений: 516
Регистрация: 17.4.2008
Где: Питер

Репутация: 2
Всего: 11

Первое что приходи на ум - подгружать аяксом картинки, попадающие в область видимости (можно пачками) - так собственно гугл делает.

И удобно, и эеономия траффика

--------------------

все вопросы - из-за неверной формулировки задачи

gcc

Дата 27.12.2010, 22:50 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

а как это сделать, чтобы была видно область видимости?

как навесить функцию на это...?

можно ли на jquery, ну или на javascript?

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

ayax2005

Дата 27.12.2010, 22:52 (ссылка)

(нет голосов)

Загрузка ...

echo $smile

Профиль
Группа: Участник
Сообщений: 516
Регистрация: 17.4.2008
Где: Питер

Репутация: 2
Всего: 11

Очень просто.
У вас же бегунок прокручивается по какому-то событию, наверное по onclick на кнопочке? Вот туда и добавьте загрузку изображений.

--------------------

все вопросы - из-за неверной формулировки задачи

gcc

Дата 27.12.2010, 22:55 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

не понимаю, как мне узнать какие картинки загруженные или какие нет?

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

еще на сайте jquery.com когда перемещаешься вниз к комментариям, то они загружаются чере аякс, тогда когда курсор мышки будет там...

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

gcc

Дата 11.1.2011, 04:19 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

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

Код

$("img").mouseover(function() {
    /* здесь делаем то что надо делать */
});

======
в идеально случае то, что я хотел, наверное, как-то не реально делается, нужно координакты выситывать, и ввести учет кусков HTML которые в прокрутке...

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

gcc

Дата 14.1.2011, 00:21 (ссылка)

(голосов:1)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

сделал!!

еще раз: надо было сделать так как тут:
http://www.google.com.ua/images?um=1&h...q=&gs_rfai=

у гугла (там только с Firefox)

нашел плагин:
jquery http://plugins.jquery.com/project/lazyload

демо:
http://www.appelsiini.net/projects/lazyload/enabled.html

Код


$(function() {          

$(".va_news").lazyload({ 
    container: $(".table_coupons1")
});

});

очень отлично было и при скроллинге!!

только была проблема, что картинок было 200 штук
и оно их показыло сразу, а потом скрывало... - это очень физически бессмысленно...

если написать так:

Код

.pf_news { display:none; }

Код


$(function() {          

$(".va_news").lazyload({ 
    container: $(".table_coupons1"),
    failurelimit: 10
}).show(); 


});

то очень сильно грузило CPU клиента и и firefox писала, что нужно прекратить выполнение скрипта jquery1-4-4

посмотрев доки не нашел как решить...

сделал так, поставив setTimeout:

Код




// --------- start VIDEO

    setTimeout(function() {  
    
$(function() {          

$(".video_class_35").lazyload({ 
    container: $(".table_coupons4"),
          failurelimit: 10
}).show();   


});
 }, 2000);
 
 
    setTimeout(function() {  

$(function() {          

$(".video_class_45").lazyload({ 
    container: $(".table_coupons4"),
          failurelimit: 10
}).show();   


});
 }, 4000);
 
 
    setTimeout(function() {  
 $(function() {          

$(".video_class_65").lazyload({ 
    container: $(".table_coupons4"),
          failurelimit: 10
}).show();   


});
 }, 6000);
 
 
 
    setTimeout(function() {  
 $(function() {          

$(".video_class_85").lazyload({ 
    container: $(".table_coupons4"),
          failurelimit: 10
}).show();   


});
 }, 8000);
 
 
 
    setTimeout(function() {  
 $(function() {          

$(".video_class_104").lazyload({ 
    container: $(".table_coupons4"),
          failurelimit: 10
}).show();   


});
 }, 10000);
 
 
 
    setTimeout(function() {  
 $(function() {          

$(".video_class_132").lazyload({ 
    container: $(".table_coupons4"),
          failurelimit: 10
}).show();   


});
 }, 12000);
 
  
 
    setTimeout(function() {  
 $(function() {          

$(".video_class_152").lazyload({ 
    container: $(".table_coupons4"),
          failurelimit: 10
}).show();   


});
 }, 14000);
 
 
 
 

// --------- END VIDEO





// --------- start PHOTO

    setTimeout(function() {  
  
$(function() {          

$(".class_35").lazyload({ 
    container: $(".table_coupons3"),
      failurelimit: 10
}).show(); 

});
 }, 3000);


    setTimeout(function() {  
    
$(function() {          

$(".class_45").lazyload({ 
    container: $(".table_coupons3"),
      failurelimit: 10
}).show(); 


});

  
  }, 6000);


    setTimeout(function() {  

$(function() {          

$(".class_65").lazyload({ 
    container: $(".table_coupons3"),
      failurelimit: 10
}).show(); 

});

  }, 6000);

    setTimeout(function() {  
    
$(function() {          

$(".class_85").lazyload({ 
    container: $(".table_coupons3"),
      failurelimit: 10
}).show(); 


});

}, 8000);


    setTimeout(function() {  

$(function() {          

$(".class_104").lazyload({ 
    container: $(".table_coupons3"),
      failurelimit: 10
}).show(); 


});

}, 10000);

    setTimeout(function() {  
    
$(function() {          

$(".class_132").lazyload({ 
    container: $(".table_coupons3"),
      failurelimit: 10
}).show(); 


});


}, 12000);


    setTimeout(function() {  
    
$(function() {          

$(".class_152").lazyload({ 
    container: $(".table_coupons3"),
      failurelimit: 10
}).show(); 


});


}, 14000);


// --------- END PHOTO






$(function() {          

$(".pa_news").lazyload({ 
    container: $(".table_coupons2"),
          failurelimit: 10
}).show();   


});


$(function() {          

$(".va_news").lazyload({ 
    container: $(".table_coupons1"),
          failurelimit: 10
}).show();   


});








</script>

Код


<style type="text/css">

.pa_news { display:none; }
.va_news { display:none; }


.class_35 { display:none; }
.class_45 { display:none; }
.class_65 { display:none; }
.class_85 { display:none; }
.class_104 { display:none; }
.class_132 { display:none; }
.class_152 { display:none; }

.video_class_35 { display:none; }
.video_class_45 { display:none; }
.video_class_65 { display:none; }
.video_class_85 { display:none; }
.video_class_104 { display:none; }
.video_class_132 { display:none; }
.video_class_152 { display:none; }



</style>

но все равно не много прилично грузит CPU браузера...

тут можно посмотреть как работает:
(я тестировал на firefox2-3, вродебы нормально, на opera9 внизу верстка сбилась, на opera10-11, тоже, вродебы нормально)
http://www.x0.org.ua/

Это сообщение отредактировал(а) gcc - 14.1.2011, 00:35

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »