Я пытаюсь загрузить изображения с помощью поискового запроса, а затем поместить их с помощью модуля 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() дважды, один раз до и сразу после загрузки изображения. Я попытался сделать это только один раз (как до, так и после загрузки изображения), но он, похоже, не работает. Изображения отображаются с шириной, равной 100% от ширины div.search-results
. Но когда я вызываю функцию в Chrome Dev Tools Окно консоли, после загрузки изображения, как:
$('.search-results').BlocksIt({
numOfCol: 4,
offsetX: 1,
offsetY: 1
});
изображения получают выровнены и изменение размеров отлично. Пожалуйста, помогите мне сделать это правильно.
Это действительно вызывает вызов, когда я нажимаю return в окне поиска. (Подтверждено вызовом 'console.log()'). И, конечно, если это не вызвало, то никакого вызова AJAX не было бы сделано, и никакие изображения не были бы загружены. – rarora7777
ОК! Но это выглядит так плохо, что моя первая съемка была для этого кода! – Damian0o