laimas,
Есть одна небольшая ошибочка.
Сколько я не смотрел, у меня всегда показывалось только 8 картинок, почему то.
А если посмотреть в отладчике, то там выплевывается ошибка, что data[9] есть undefined
А дело в строке 37.
if(i == count-1) ret()
Как только загрузилась последняя картинка (с i == 13) то вызывается ret (). Не дожидаясь того, что предыдущие картинки еще могут быть не загружены.
Файл 8-й (data[9]) картинки "https://veasy.ru/wp-content/uploads/1-69.png" наверно слишком большой, и он загружается последним, поэтому и не готов ко времени выполнения ret.
Я немного поменял код, что бы грузилось все, используя Promise.all.
В компоновку не вдавался, поэтому выглядит немного странно.
<!DOCTYPE HTML>
<html>
<body>
<div id="show" style="width:700px;"></div>
<script>
let ims = [
'https://icdn.lenta.ru/images/2020/09/11/13/20200911130707980/pic_d755b4d0cfe191965282d20cf7f15929.png',
'https://images.pexels.com/photos/5393597/pexels-photo-5393597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://s1.stc.all.kpcdn.net/russia/wp-content/uploads/2020/05/devushka-v-shlyape.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_01.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_10.jpg',
'https://cdn.footballua.tv/i/image_650x360/uploads/football-media/image/5e9/97d/394/5e997d3944244_.jpeg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_57.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_47.jpg',
'https://veasy.ru/wp-content/uploads/1-69.png',
'https://images.pexels.com/photos/5644323/pexels-photo-5644323.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://vjoy.cc/wp-content/uploads/2019/07/1-47.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_14.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_37.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_39.jpg'
],
width_box = 700,
height_line = 150,
margin = 1,
// count = ims.length,
// first = 1,
box = document.getElementById('show')
// data = [];
;
function preload(ret) {
Promise.all(
ims.map((src, i)=> {
let im = new Image
im.src = src
return im.decode().then (_ => { return {src: src, w: im.width, h: im.height, img:im}});
})
).then ( data => ret(data))
}
preload( data => {
const count = data.length;
let first = 1;
while(first <= count) {
let im = first - 1,
H = height_line + 1;
while(H > height_line && im < count) {
im++;
let width = width_box - (im - first + 1) * margin * 2;
let del = width * data[first-1].h,
dev = data[first-1].w;
for(let i = first+1; i <= im; ++i) dev = dev + data[i-1].w * (data[first-1].h / data[i-1].h);
H = Math.floor(del / dev);
if(H <= height_line) {
for(let i = first; i <= im; ++i) {
let ims = data[i-1].img;
ims.height = H;
ims.style.margin = margin + 'px';
box.appendChild(ims);
}
first = im + 1;
} else {
if(im == count) {
for(let i = first; i <= im; ++i) {
let ims = data[i-1].img;
ims.height = H;
ims.style.margin = margin + 'px';
box.appendChild(ims);
}
first = im + 1;
}
}
}
}
});
</script>
</body>
</html>