터치 장치 지연로드

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와 + 모더 나이저 필수) :

 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