Lazy Load для сенсорных устройств

Question

Я использую плагин jQuery Lazy Load (http://appelsiini.net/projects/lazyload), а на сенсорных устройствах он работает не так гладко из-за того, что скрипт не запускается до остановки прокрутки (как указано на https://github.com/tuupola/jquery_lazyload/issues/87). Существует ли какое-либо известное обходное решение для применения сенсорного события для запуска сценария таким же образом?

Answer 1

Попробуйте нижеследующую ссылку и ознакомьтесь с ней.

http://javascriptquestions.com/question/showChrono/id/83
если ($ grid.length> 0) {

$grid.imagesLoaded(function() { 

     $grid.delay(200).masonry({ 

      gutterWidth: 14, 

      itemSelector: '.item', 

      isAnimated: false, 

      isFitWidth: true, 

      columnWidth: 194, 

      animationOptions: { duration: 400 } 

     }); 



     $('.item img').lazyload({ 

      effect: 'fadeIn' 

     }); 

    }); 

}

Answer 2

Привет, для любого использования LazyLoad с кладкой на сенсорных устройствах, это работает отлично (JQuery + Modernizr требуется):

 var $container = $('#content'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
       itemSelector: '.item', 
       }); 
      if (Modernizr.touch) { 
       $('.item img').lazyload({ 
        effect: 'fadeIn', 
        event: 'touchLoad' 
        });     
       $('.item img').trigger('touchLoad'); 
      } 
      else { 
       $('.item img').lazyload({ 
        effect: 'fadeIn', 
        event: 'scroll' 
        }); 
       $('.item img').trigger('scroll'); 
      }    
     }); 

Answer 3

Существует хороший легкий плагин jquery - "im гр». Проверьте здесь https://github.com/agaase/imgr.

Плагин оптимизирован для мобильных устройств; поэтому отлично работает с сенсорными устройствами. Вы также можете загрузить изображение как обычный элемент или фоновое изображение.

Проверить демки здесь

http://agaase.github.io/webpages/imgr/demos/demo1.html http://agaase.github.io/webpages/imgr/demos/demo2.html