對於觸摸設備的惰性負載

Question

我正在使用jQuery插件Lazy Load（http://appelsiini.net/projects/lazyload），並且在觸摸設備上，由於腳本在滾動停止之前未啓動（如https://github.com/tuupola/jquery_lazyload/issues/87所述），所以腳本無法順利運行。是否有任何已知的解決方法來應用觸摸事件以相同的方式觸發腳本？

Answer 1

請嘗試下面的內容，並參閱參考URL爲您效勞！

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 GR」。在這裏檢查https://github.com/agaase/imgr。

該插件是移動優化的;所以在觸摸設備上效果很好。您也可以將圖像作爲普通元素或作爲背景圖像加載。

入住這裏演示

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