Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > загрузка картинки в кэш при перемещении курсора


Автор: gcc 27.12.2010, 10:04
нужно вывести на страницу в вертикальной и в горизонтальной прокрутке 20-100 картинок превью по 4-7кб

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

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

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

Автор: gcc 27.12.2010, 22:50
а как это сделать, чтобы была видно область видимости? 

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

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

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

Автор: gcc 27.12.2010, 22:55
не понимаю, как мне узнать какие картинки загруженные или какие нет?

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


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

Автор: gcc 11.1.2011, 04:19
я вижу только один вариант:
как только пользователь поставит курсор мышки в самом низу, в нижней части на картинки, то выполнить функцию которая подгрузит картинки...
Код
$("img").mouseover(function() {
    /* здесь делаем то что надо делать */
});


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

Автор: gcc 14.1.2011, 00:21
сделал!!

еще раз: надо было сделать так как тут:
http://www.google.com.ua/images?um=1&hl=uk&client=firefox-a&hs=2lO&rls=org.mozilla%3Aen-US%3Aofficial&channel=s&biw=1280&bih=801&tbs=isch%3A1&sa=1&q=%D1%84%D0%BE%D1%82%D0%BE+sexylette&aq=f&aqi=&aql=&oq=&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/

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)