jQuery 도구에서 AJAX를 사용하여 이미지로드하기 Scrollable

Question

잘 작동하는 스크롤 가능한 제품 상자를 만들기 위해 jQuery Tools를 사용하고 있습니다.

그러나 AJAX를 통해 이미지를로드하고 싶습니다 ... 게으른로드를 살펴 봤지만 가로 div에서 작동하지 않습니다 - 보이는 모든 이미지가 아닌 div의 모든 이미지를로드합니다. . 내가 이것을 사용하고

: 나는 공개라는 몇 가지 코드를 발견 http://jquerytools.org/demos/scrollable/index.html

-http://luis-almeida.github.com/unveil/ 좋은 경량 코드는하지만 스크롤에 맞게 코드를 변경하는 방법을 작동하지 않을 수 있습니다.

는 기본적으로 나는

사람이 나를 위해 어떤 포인터를 가지고 ... 요청이있을 경우에만 숨겨진 된 div를로드 할?

는 편집 :

JSFiddle example - 오른쪽 화살표가 사전로드 모든보다는 클릭하면 div의를로드 할 필요가

<!-- 5-10 --> & <!-- 10-15 --> 

을 표시했다. 내 가게에는 scroller에 수백 개의 이미지가있을 수 있으므로 문제가됩니다!

Answer 1

필요에 따라 JSON의 이미지를 items div로로드 할 수 있습니다 (예 : 다음/이전 클릭을 기준으로). 이것에 대한

코드는 사용자가 스크롤 제품 상자를 만드는 http://jquerytools.org/demos/scrollable/index.html을 사용할 수 있습니다

<div id='items'> 
</div> 

var imagesJSON = ["http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg", 
        "http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg", 
        "http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg", 
        "http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg", 
        "http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg", 
        "http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg", 
        "http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg", 
        "http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg", 
        "http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg", 
        "http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg", 
        "http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg", 
        "http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg"]; 

var currImages = 0; 

$(function() { 
    currImages = 0; 
    LoopThroughImages(); 

    // initialize scrollable 
    $(".scrollable").scrollable(); 
    $('.next').click(function() { 
     // Load next 4 images using ajax. 
     //i am loading images from the array 
     LoadNextImagesAjax(); 
    }); 
}); 

function LoopThroughImages() { 
    var i = 0; 
    var currDiv = null; 

    for (var i = 0; i < 8; i++) { 
     if(imagesJSON.length < currImages + i) 
     { 
      currImages+=i; 
      return; 
     } 
     if (i % 4 == 0) { 
      currDiv = $('<div></div>'); 
      $(".items").append(currDiv); 
     } 
     currDiv.append('<img src="' + imagesJSON[i] + '" />'); 
    } 

    currImages+=8; 
} 

function LoadNextImagesAjax() { 
    for (var i = 0; i < 4; i++) { 
     if(imagesJSON.length <= currImages + i) 
     { 
      currImages+=i; 
      return; 
     } 
     if (i % 4 == 0) { 
      currDiv = $('<div></div>'); 
      $(".items").append(currDiv); 
     } 
     currDiv.append('<img src="' + imagesJSON[currImages + i] + '" />'); 
    } 

    currImages+=4; 
} 

아래에 주어진다.

JSFiddle demo here을 찾을 수 있습니다. 이 코드를 테스트하려면 유효한 이미지 경로를 제공해야합니다.