通過AJAX加載定位圖像

我想用一個搜索查詢加載圖像，然後使用jQuery Blocks It插件（BlocksIt.js）對它們進行定位。這是相關的javascript：通過AJAX加載定位圖像

<script> 
      function getResults(query, max, $selector) 
      { 
       $selector.html("Loading..."); 
       $.getJSON('/search', {query: query, max: max}, function(data) { 
        var items = data; 
        $selector.html(""); 
        for(var i=0; i<data.length; ++i) 
         $selector.html($selector.html()+"<div class='img-holder' ><img class='search-image' src='"+ data[i] +"' /></div>"); 
       }); 

       $selector.waitForImages({ 
        finished: function(){ 
         $selector.BlocksIt({ 
          numOfCol: 4, 
          offsetX: 1, 
          offsetY: 1 
         }); 
        }, 
        waitForAll: true 
       }); 
       $selector.css({height: '500px', overflow: 'auto'}); 
      } 
      jQuery(function($) { 
       $('form[data-async]').live('submit', function(event) { 
        getResults($('#db-search').val(), 20, $('.search-results')); 
        $('.search-results').BlocksIt({ 
         numOfCol: 4, 
         offsetX: 1, 
         offsetY: 1 
        }); 
        event.preventDefault(); 
       }); 
      }); 

</script>

和DOM是這樣的：

<div class='row-fixed'> 
       <div class='span4'> 
        <form data-async class="search-form navbar-search pull-left" action='/search'> 
         <input type="text" id='db-search' class="search-query" name='query' placeholder="Search" /> 
         <input type='hidden' name='max' value=20 /> 
        </form> 
        <div class="search-results" style="width: 100%; height:500px; position:relative;"> 

        </div> 
       </div> 
      </div>

我打電話的BlocksIt（）函數兩次，一次之前，和圖像加載後一次。我試過只做一次（圖像加載前後），但似乎沒有工作。圖像的顯示寬度等於div.search-results寬度的100％。但是，當我調用該函數在Chrome瀏覽器開發工具控制檯窗口，圖像加載後，如：

$('.search-results').BlocksIt({ 
        numOfCol: 4, 
        offsetX: 1, 
        offsetY: 1 
       });

圖像得到一致和完美的調整。請幫助我正確地做到這一點。

來源

2013-06-26 rarora7777

此代碼將永遠不會被調用！

jQuery(function($) { 
    $('form[data-async]').live('submit', function(event) { 
      getResults($('#db-search').val(), 20, $('.search-results')); 
      $('.search-results').BlocksIt({ 
      numOfCol: 4, 
      offsetX: 1, 
      offsetY: 1 
      }); 
     event.preventDefault(); 
     }); 
});

來源

2013-06-26 11:06:37 Damian0o

當我在搜索框上按回車時，確實會調用它。（通過調用'console.log（）'確認）。當然，如果這沒有被調用，那麼就不會有AJAX調用，也沒有圖像被加載。 – rarora7777

好的！但它看起來很糟糕，我的第一次拍攝就是這樣的代碼！ – Damian0o

通過AJAX加載定位圖像

回答

相關問題