Jquery Ajax 이미지로드는 경고문이 $ (window) .one 함수에 삽입 된 후에 만 ​​작동합니다.

Question

나는 특이한 문제가 있습니다. 여러 이미지의 src, width 및 height가 포함 된 JSON 파일을로드 중입니다.

나는 이것을 부드러운 스크립트 jquery 플러그인에로드하고 이미지를 자동으로 스크롤하려고합니다.

"보기 영역"div는 3 개의 이미지를 나란히 맞출 수 있습니다.

처음 페이지를로드하면 첫 번째 이미지 만 표시됩니다. 다시로드하면 처음 세 이미지가 표시되고 다른 이미지 (총 11 개)가로드되지만 플러그인이 스크롤되지 않으므로 볼 수 없습니다.

$ (window) .one 함수에 경고 ("무엇이든") 행을 삽입하면 모든 것이 잘 동작합니다.

이미지가로드 될 때와 .load 이벤트가 트리거 될 때와 관련이 있다고 의심됩니다.

var aSectionImages = new Array; 
var aImagesCount = new Array(); 
var aImagesLoaded = new Array(); 
var htmlString; 
var jsonStyleImages = "images.json" 
var jsonNavImages = "imagesNav.json"; 
var scrollableArea = $("#scrollableArea"); 
$.getJSON(jsonNavImages, getNavIcons); 
$.getJSON(jsonStyleImages, makeScroller); 

function imageLoaded(imgSrc){ 
var locId = (imageInSection(imgSrc)).replace(/\s|'/g, "_"); 
if (aImagesLoaded[locId]===undefined){ 
    aImagesLoaded[locId] = 0; 
};  
aImagesLoaded[locId] = aImagesLoaded[locId]+1; 
if (aImagesLoaded[locId]==aImagesCount[locId]){ 
    //alert("section" + locId); 
    //$("#loaded").html(locId); 
    //aSectionLoaded = {locId:"loaded"}; 

    //in theory, wait until all images in a section are loaded before 
    //appending the HTML to the div: 
    scrollableArea.append(htmlString); 
} 
} 

function imageInSection(src){ 
var resultId=false; 
var locSrc = src.split("/"); 
var locFileName = (locSrc[locSrc.length-1]); 
for (i = 0; i < aSectionImages.length; i++){ 
    for(j=0; j < aSectionImages[i].images.length; j++){ 
    tempSrc = aSectionImages[i].images[j].src.split("/"); 
    tempFileName = tempSrc[tempSrc.length-1]; 
    if (tempFileName == locFileName) { 
    resultId = aSectionImages[i].id; 
    } 
    } 
} 
return resultId; 
} 

function makeScroller(data){ 
aSectionImages = data; 
for (i=0; i<aSectionImages.length;i++){ 
    locData = aSectionImages[i]; 
    locId = locData.id.replace(/\s|'/g, "_"); 
    aImagesCount[locId] = locData.images.length; 
    htmlString = "<div id=\"" + locId + "\">"; 

    for (j=0; j<locData.images.length; j++){ 
    oImage = new Image(); 
    $(oImage) 
    .load(function(){ 
     imageLoaded(this.src); 
    }) 
    .attr("src", locData.images[j].src); 

    if (oImage.complete && oImage.naturalWidth !== 0){ 
    $(this).trigger("load"); 
    //$("#trigger").html(locData.images[j].src); 
    //return false; 
    } 
    locImage = locData.images[j]; 
    locImage.id ? locImage.id = " id=\""+locImage.id+"\" " : locImage.id = ""; 
    htmlString += "<img height=\"" + locImage.height + "\"" + " width=\"" + locImage.width + "\"" + locImage.id + " src=\"" + locImage.src + "\" />"; 
    }  
} 

} 여기

이 pluging의 일부로서 이미지를 표시 다룬다 : 여기

는 JSON 파일을 구문 분석하고 스크롤 사업부에 추가되는 HTML 문자열을 생성하는 코드입니다 로드 됨 :

//로드시 한 번 수행 할 작업 $ (창) .one ("load", function() { // 경고 ("여기에 경고를 포함하면 왜 작동합니까?"));

// If the content of the scrolling area is not loaded through ajax, 
// we assume it's already there and can run the code to calculate 
// the width of the scrolling area, resize it to that width 
if(options.ajaxContentURL.length === 0) { 
$mom.scrollableAreaWidth = 0; 
$mom.tempStartingPosition = 0; 

$mom.find(options.scrollableArea).children().find("img").each(function() { 

    // Check to see if the current element in the loop is the one where the scrolling should start 
    if((options.startAtElementId.length !== 0) && (($(this).attr("id")) == options.startAtElementId)) { 
    $mom.tempStartingPosition = $mom.scrollableAreaWidth; 
    } 

    // Add the width of the current element in the loop to the total width 
    $mom.scrollableAreaWidth = $mom.scrollableAreaWidth + $(this).outerWidth(true); 
}); 

// Set the width of the scrollableArea to the accumulated width 
$mom.find(options.scrollableArea).css("width", $mom.scrollableAreaWidth + "px"); 

// Check to see if the whole thing should be hidden at start 
if(options.hiddenOnStart) { 
    $mom.hide(); 
} 
} 

// Set the starting position of the scrollable area. If no startAtElementId is set, the starting position 
// will be the default value (zero) 
$mom.find(options.scrollWrapper).scrollLeft($mom.tempStartingPosition); 

// If the user has set the option autoScroll, the scollable area will 
// start scrolling automatically 
if(options.autoScroll !== "") { 
$mom.autoScrollInterval = setInterval(autoScroll, $mom.autoScrollDelay); 
} 

// If autoScroll is set to always, the hot spots should be disabled 
if(options.autoScroll == "always") 
{ 
hideLeftHotSpot(); 
hideRightHotSpot(); 
} 

// If the user wants to have visible hot spots, here is where it's taken care of 
switch(options.visibleHotSpots) 
{ 
case "always": 
    makeHotSpotBackgroundsVisible(); 
    break; 
case "onstart": 
    makeHotSpotBackgroundsVisible(); 
    $mom.hideHotSpotBackgroundsInterval = setInterval(hideHotSpotBackgrounds, (options.hotSpotsVisibleTime * 1000)); 
    break; 
default: 
    break; 
} 

});

전체 코드는 http://chereecheree.com/dagworthy/style.html

당신은 페이지를 다시로드하면 예상대로 작동하는지 알 수 있지만 에서 링크를 따라하면 한 레벨 업 (dagwothy /) 것

, 최초의 단지에있다 이미지가로드 될 때 경고 문이로드 될 때까지로드되지 않습니다.

시간을내어 주셔서 감사합니다. - 대니얼.

Answer 1

내가 당신의 문제에 대해 생각하거나, 첫 번째 적어도 내가 볼 :

oImage = new Image(); 
$(oImage).load(function(){ 
    imageLoaded(this.src); 
}).attr("src", locData.images[j].src); 

if (oImage.complete && oImage.naturalWidth !== 0){ 
    $(this).trigger("load"); 
} 

이러한 맥락에서 this (그것이 .each()에있을 것 같은), 그것은 문서의 oImage 아니라, 따라서 잘못된 요소에 load을 발사하려는 경우 $(oImage).trigger("load") 또는 $(oImage).load()이 필요합니다.

처리하려는 경우 load을 수동으로 실행하는 것은 캐시에서 이미지를로드 할 때 모든 브라우저에서 실행되지 않기 때문에 수동으로 실행하는 것이 좋습니다 ...

if (aImagesLoaded[locId]==aImagesCount[locId]){ 

---

alert()로드 할 수있는 이미지의 시간을 제공 : 당신은 모든 이미지가 수를 증가하는 load 이벤트를 가진 적이 있기 때문에 그렇지 않으면이 조건이 참 결코 오른쪽 요소에 이벤트를 발생합니다 그래서 모든 것이 준비되기 전에 준비가 끝났습니다 ... 창문 밖의 모든 경쟁 조건을 던지기 때문에, 보통 상황이 발생하기 전에 어떤 의존성이로드되기 전에 시간이 없었거나 b) 어떤 이벤트가 발생했습니다 주문은 첫 번째로 한 번로드하면됩니다. 보통은 다소 부분적입니다.