1

У меня есть код разделяющий фотографию на заданное число квадратов, и мне нужно, чтобы он возвращал массив этих элементов(каждого квадратика), но он возвращает пустой массив.

Но если в функции внутри цикла выводить каждый элемент в консоль всё работает нормально. 

var img = new Image();
var width;
var height;
var xlength = 30;
var ylength = 20;
var elements = []; //массив-------------------------------------------------------

img.src = 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg';


img.onload = function() {
  width = this.width;
  height = this.height;
  for (var j = 0; j < ylength; j++) {


for (var i = 0; i &lt; xlength; i++) {

  var left = (-1 * width / xlength * i).toString() + "px";
  var top = (-1 * height / ylength * j).toString() + "px";

  var element = jQuery('&lt;div/&gt;', {
    id: i + "" + j,
    class: "splitImg",
    css: {
      "width": Math.floor(width / xlength),
      "height": Math.floor(height / ylength),
      "background-position": left + " " + top,
      "background-image": 'url(' + img.src + ')'
    }
  })
  elements += element[0]; //добавление элементов------------------------------
  element.appendTo('#wrapper');
  $("#wrapper").width(width + (xlength * -0.5))
}



}
}


console.log(elements);
#wrapper {
  display: flex;
  flex-wrap: wrap;
}

.splitImg {
  background-clip: content-box;
  background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">

</div>
Air
  • 14,505
Александр
  • 35

1 Answers1

1

Вы вызываете console.log(elements);, не дожидаясь пока отработает событие onload. Естественно в массиве еще ничего нет.

И что должна делать строчка elements += element[0];, складывающая массив с DOM-элементом? Может elements.push(element[0]);?

как сделать чтобы массив заполнялся этими объектами

Пора сказать слово "асинхронность".

Массив заполняется этими объектами - внутри обработчика onload. Вы можете в этом убедиться, если дождетесь загрузки изображения с сервера на клиент и выведете 

console.log(elements);

в конце этой анонимной функции.

Обратите внимание на ссылку в комментарии под вопросом:

Как вернуть значение из события или из функции обратного вызова? Или хотя бы дождаться их окончания

  • elements.push(element[0]) помог, он создаёт массив, но когда я пытаюсь получить доступ к элементу этого массива например: console.log(elements[0]), он выводит в консоль 'undefined'. Как сделать чтобы он выводил элемент с заданным индексом? – Александр Oct 24 '18 at 11:55
  • @Александр Сконцентрируйтесь на первом абзаце моего ответа. Вам понятно, о чем в нем говорится? –  Oct 24 '18 at 13:13
  • А как сделать чтобы массив заполнялся этими объектами? – Александр Oct 24 '18 at 15:20