게으른 이미지 jQuery Mobile 내에서 이미지로드

Question

많은 양의 이미지가 포함 된 페이지의로드 시간을 높이기 위해 Lazy Load 플러그인을 jQueryMobile 사이트에 구현하려고합니다.

다음과 같은 URL로 직접 이동하여 JQM의 ajax 페이지 로딩을 건너 뛴 경우 : 지연로드가 잘 작동합니다. 그러나 JQM의 ajax 페이지 로딩을 사용하는 다른 페이지에서 About 페이지를 클릭하면 Lazy Load가로드되지 않습니다. 페이지 정보

(가) about의 ID를 가지고 =><div data-role="page" data-theme="a" id="about"> 내가 더 성공과 pageinit 기능과 결합의 변화의 숫자를 시도했습니다

. 최근 시도 :

$('#about').live('pageinit', function() { 
    $(window).load(function() { 
     $("img.lazy").lazyload(); 
    }); 
}); 

이것에 대한 안내는 최고입니다. 고마워.

Answer 1

window.load 함수는 한 번만 실행되며, AJAX를 통해 페이지가 DOM으로 가져 왔을 때 실행되면 바인딩됩니다. 특정 페이지가 초기화 될 때 문제에 대한 해결책은 아주 간단합니다, 코드를 실행 : pageinit이 document.ready 화재 때까지 발생하지 않습니다 때문에

$(document).delegate('#about', 'pageinit', function() { 

    //notice I start the selection with the current page, 
    //this way you only run the code on images on this pseudo-page 
    $(this).find("img.lazy").lazyload(); 
}); 

이

가 잘 작동합니다.

.live() 대신 .live()을 사용했는데, .live()이 감가 상각되어 있으며 향후 릴리스에서 제거 될 수 있습니다.

$(SELECTION).live(EVENT, EVENT-HANDLER); 

은 동일하다 : jQuery를 1.7로,

$(document).delegate(SELECTION, EVENT, EVENT-HANDLER); 

그리고 보너스 라운드를 들어, 위의 기능을 모두 실제로 .on()에 매핑 그리고 당신과 같이 위임 된 영지에서 .on()을 사용할 수 있습니다 :

$(document).on(EVENT, SELECTION, EVENT-HANDLER); 

문서 :

• .live() : http://api.jquery.com/live
• .delegate() : http://api.jquery.com/delegate
• .on() : http://api.jquery.com/on

코드는 첫 번째 페이지 뷰에서 일한 이유는 pageinit에 바인딩 후 window.load 이벤트가 발사 되었기 때문이었다 이벤트 처리기를 호출하지만 후속 AJAX로드에서는 더 이상 실행되지 않을 경우에도 window.load 이벤트에 바인딩합니다.