26.11.2016, 20:58
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
DlinniyZmey, прогружай все картинки заранее чтобы из кэша брать и добавляй всем скопом за раз через фрагмент:
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
}
img {
position: absolute;
width: 50px;
height: 50px;
}
</style>
<script>
(function(){
var preload = function(images, callback) {
var image, length = images.length, index = length;
while (index--) {
image = new Image();
image.onload = function () {
if (--length < 1) callback();
};
image.onerror = function () {
alert('Not all images are preloaded!');
};
image.src = images[index];
}
};
var layer = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 0, 0, 0, 0, 0, 0, 2, 1],
[1, 2, 0, 0, 0, 0, 0, 0, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
var render = function () {
var row, col, type, image;
var fragment = document.createDocumentFragment();
for (row = 0; row < 6; row++) {
for (col = 0; col < 10; col++) {
type = layer[row][col];
if (type !== 0) {
image = layer[row][col] = new Image();
image.style.top = row * 50 + 'px';
image.style.left = col * 50 + 'px';
if (type === 1) {
image.src = images[0];
} else if (type === 2) {
image.src = images[1];
}
fragment.appendChild(image);
}
}
}
document.body.appendChild(fragment);
};
var images = [
'http://javascript.ru/cat/list/project.jpg',
'http://javascript.ru/cat/list/donkey.gif'
];
preload(images, render);
}());
</script>
Последний раз редактировалось Rise, 27.11.2016 в 01:48.
|
|
27.11.2016, 07:06
|
|
Интересующийся
|
|
Регистрация: 07.08.2016
Сообщений: 14
|
|
Сообщение от Rise
|
DlinniyZmey,
pole[i][j].onload=function(){document.body.appendChild(this)}
|
Спасибо!!!! Так и не понял, что это было, но теперь всё работает!!!! |
|
28.11.2016, 10:57
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
DlinniyZmey,
что-то у вас с onload больно мудрено...
<script>
window.onload = function() {
var pole=[
[0,0,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],] ;
for (var i=0;i<6;i++){
for (var j=0;j<10;j++){
if (pole[i][j]==0) {
pole[i][j]=new Image()
pole[i][j].src="http://javascript.ru/cat/list/mobile.jpg"
pole[i][j].width="50"
pole[i][j].style.position="absolute"
pole[i][j].style.left=j*50+"px";
pole[i][j].style.top =i*70+"px";
document.body.appendChild(pole[i][j])// работает.
}}}}
</script>
<body></body>
|
|
|
|
