AJAX가있는 특정 페이지의 jQuery 화재 기능이 기본 탐색을 방지합니다.

Question

각 페이지를 페이드 인시키기 위해 AJAX를 사용하여 탐색 용 jQuery 스크립트가 있습니다. 또한 데이터베이스에서 이미지를 가져온 후에 이미지를 표시하기 위해 imagesLoaded를 사용하고 있습니다.

각각이 잘 작동하며 페이지가 이미지 페이지에서 처음로드 될 때 이미지가 완벽하게로드됩니다. 그러나 처음에 다른 페이지에서로드 한 후에 이미지 페이지로 이동하기 위해 내비게이션을 사용하면 imagesLoaded가 실행되지 않습니다.

imagesLoaded 스크립트의 부분 :

function portfolioImages() { 
    $(function() { 
     var $container = $('#container'); 
     var $content = $container.find('#columns'); 

     $(document).ready(function() { 
      var items = getItems(); 
      console.log(items); 
      $content.append($(items)); 
      $content.imagesLoaded() 
      .progress(onProgress) 
     }); 
    }); 

    function getItems() { 
     var items = ''; 
     for (var i = 0; i < 1; i++) { 
      items += getImageItem(); 
     } 
     return items; 
    } 

    function getImageItem() { 
     var item; 
     var src; 
     $.ajax({ 
      async: false, 
      url: "images-query.php", 
      dataType: "json", 
      success: function(data){ 
       item=" "; 
       for (var i in data.images) { 
        item+="<li class=\"is-loading\"><img src=\"images/"+data.images[i].filename+"\" class=\""+data.images[i].orientation+"\" /></li>"; 
       } 
       item+=" "; 
      } 
     }); 
     console.log(item); 
     return item; 
    } 

    function onProgress(imgLoad, image) { 
     $(image.img).fadeIn(); 
     var $item = $(image.img).parent(); 
     $item.removeClass('is-loading'); 
     if (!image.isLoaded) { 
      $item.addClass('is-broken'); 
     } 
    } 
} 

jQuery를 AJAX 탐색 부분 :

var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1); 
$(document).ready(function() { 
    if (pgurl == 'portfolio'){ 
     portfolioImages(); 
    } 
    $("#links li a.menu").each(function(){ 
     if($(this).attr("href") == pgurl){ 
      $(this).addClass("default"); 
      $(this).addClass("active"); 
     } 
    }); 
    $('#links a.menu.default').click(function(e) { 
     e.preventDefault(); 
     $(this).addClass("active"); 
     var url = $(this).attr('href'); 
     $.ajax({ 
      url: url, 
      success: function(data) { 
       $('#newcontent').fadeOut(function() { 
        $(this).fadeOut();  
        $('#links a').not(".default").removeClass("active"); 

        $('#defaultcontent').fadeIn(function() { 
         $(this).fadeIn();  
         window.history.pushState(null, data, "/ajaxtransition/" + url); 
        }); 

       }); 
       if(data = 'portfolio'){ 
        return false; 
       } 
      } 
     }); 
    }); 
    $('#links a').not(".default").click(function(e) { 
     e.preventDefault(); 
     $(".active").removeClass("active"); 
     var url = $(this).attr('href'); 
     $.ajax({ 
      url: url, 
      success: function(data) { 
       $('#defaultcontent').fadeOut(function() { 
        $(this).fadeOut();  

        $('#newcontent').fadeOut(function() { 
         $(this).load(url + ' #defaultcontent').fadeIn(); 
         window.history.pushState(null, data, "/ajaxtransition/" + url); 
         var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1); 
         $("#links li a.menu").each(function(){ 
          if($(this).attr("href") == pgurl){ 
           $(this).addClass("active"); 
          } 
          if($(this).attr("href") == 'portfolio'){ 
           $('#newcontent').html(portfolioImages()); 
          } 
         }); 
        }); 
       }); 
      } 
     }); 
    }); 
}); 

그리고 해당 HTML 마크 업 :

<ul id="links"> 
    <li><a href="portfolio" rel="portfolio" class="menu">Portfolio</a></li> 
    <li><a href="about" rel="about" class="menu">About</a></li> 
    <li><a href="contact" rel="contact" class="menu">Contact</a></li> 
</ul> 

내가 다음 코드에 연결하려고했습니다 , 두 번째 $('#newcontent').fadeOut(function() { ... }) 섹션의 끝 부분에서 발견되었지만 yie가 아닙니다. 올바른 결과를 얻었다. imagesLoaded는 이미지 페이지가 아니라 원래 페이지를 다시 클릭하면 시작됩니다.

if($(this).attr("href") == 'portfolio'){ 
    $('#newcontent').html(portfolioImages()); 
} 

적절한 링크를 클릭하면 이미지 페이지에서 이미지로드가 실행됩니다.

코드 정리 제안에 대해서도 열려 있습니다. :)

Answer 1

JQuery의 .load (http://api.jquery.com/load/) 메서드도 비동기이며 콜백 함수를 사용합니다. 비동기 함수에서 호출 한 후 지금까지 코드 구성으로 내가 다른 곳에서 콜백을 정의하는 제안 또한

$(this).load(url + ' #defaultcontent', function() { 
    $(this).fadeIn(); 
    window.history.pushState(null, data, "/ajaxtransition/" + url); 
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1); 
    $("#links li a.menu").each(function(){ 
     if($(this).attr("href") == pgurl){ 
      $(this).addClass("active"); 
     } 
      if($(this).attr("href") == 'portfolio'){ 
      $('#newcontent').html(portfolioImages()); 
      } 
    }); 
}); 

을하고 : 그 여기 사용해보십시오 완벽하게 작동 .load`

$(this).load(url + ' #defaultcontent', callback); 

function callback() { 
    $(this).fadeIn(); 
    window.history.pushState(null, data, "/ajaxtransition/" + url); 
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1); 
    // and so on... 
}