|
Сообщение от Stanislavsonder
|
|
Задача 2. onload для массива изображений
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
"use strict"
let imgs = [
'https://pbs.twimg.com/profile_images/717294044922187776/ojsz7uPz_400x400.jpg',
'https://www.florissimo-shop.ru/upload/resize_cache/iblock/266/256_256_1/4100.jpeg',
'https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_256/https://iris32.ru/wp-content/uploads/s1200-256x256.jpg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoTiQSapkMQDacdDcRC9L0OOzVYYT1HuyWTw&usqp=CAU',
'https://ledforms.com/1906-medium_default_2x/10500120.jpg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-KiKgpbTbFqKysnND1YAdMJ0qUSSa7bbUvA&usqp=CAU',
'https://open3dmodel.com/wp-content/uploads/2020/03/Flowers-rose.jpg'
]
var ins = [];
imgs = imgs.map(src => {
let img = new Image();
img.src = src;
ins.push(img);
return new Promise(resolve => {
img.onload = resolve
})
})
Promise.all(imgs).then(function() {
slider.prepend(...ins)//canvas
});
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>