Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.05.2016, 20:30
Новичок на форуме
Отправить личное сообщение для Bac9_AJlkaLLl Посмотреть профиль Найти все сообщения от Bac9_AJlkaLLl
 
Регистрация: 20.02.2015
Сообщений: 5

Непреклонные изображения
Доброго времени суток форумчане. Вопрос состоит в следующем. Создается массив изображений, который мне необходимо пихнуть на страницу, но перед тем как пихнуть, надо забрать у них стартовые значения высоты и ширины. Все мои попытки увенчались провалом, ибо он выводит либо "" или же 0.
naturalHeight/naturalWidth, height/width, style.height/style/width - все, что знаю перепробовал
Так вот, и кусочек кода, отвечающий за сие действо.
var quantity = 15,
    images = [];
    imageDimensions = [];


function fillArray() {
    for (var i = 1; i <= quantity; i++) {
        var Picture = document.createElement('img');
            Picture.setAttribute('src', 'image/prod/' + i + '.jpg');

        images.push(Picture);

        var startHeight = Picture.height;
        var startWidth = Picture.width;

        imageDimensions.push({width: startWidth, height: startHeight});
    }
}

function initProd() {
    fillArray();
    console.log(images);
    console.log(imageDimensions);
}


Помогите, кто чем может, а то уже вторую неделю ничего с этим поделать не могу .
Ответить с цитированием
  #2 (permalink)  
Старый 21.05.2016, 20:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,407

Bac9_AJlkaLLl,
Picture.onload => imageDimensions[i]({width: startWidth, height: startHeight});
Ответить с цитированием
  #3 (permalink)  
Старый 21.05.2016, 21:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,407

Bac9_AJlkaLLl,
var quantity = n =15,
    images = [],
imageDimensions = [];

function fillArray() {
    for (var i = 1; i <= quantity; i++) {
        var Picture = new Image;
        images.push(Picture);
        Picture.onload = function(a) {
            return function() {
                imageDimensions[a]({
                    width: this.width,
                    height: this.height
                });
                if (!--n) initProd()
            }
        }(i);
        Picture.src = "image/prod/" + i + ".jpg"
    }
}
fillArray();

function initProd() {
    console.log(images);
    console.log(imageDimensions)
};
Ответить с цитированием
  #4 (permalink)  
Старый 21.05.2016, 22:21
Новичок на форуме
Отправить личное сообщение для Bac9_AJlkaLLl Посмотреть профиль Найти все сообщения от Bac9_AJlkaLLl
 
Регистрация: 20.02.2015
Сообщений: 5

Чуть подкоректировать заполнение второго массива и все работает. Ура! спасибо огромное.
Забыл совсем про замыкания, не любил их никогда
В прежней версии, пытался через онлоэд, но к успеху не привело.

Последний раз редактировалось Bac9_AJlkaLLl, 21.05.2016 в 22:26.
Ответить с цитированием
  #5 (permalink)  
Старый 22.05.2016, 15:22
Новичок на форуме
Отправить личное сообщение для Bac9_AJlkaLLl Посмотреть профиль Найти все сообщения от Bac9_AJlkaLLl
 
Регистрация: 20.02.2015
Сообщений: 5

рони,
Нашел такую ошибку, что он вываливает не по порядку. Нашел похожий пост, в котором ты же и говоришь, что это хром пытается все оптимизировать и дело в скорости обработки, что-то такое, точно не помню...
так вот я теперь не совсем понимаю как исправить это.
function fillArray() {
    for (var i = 1; i <= quantity; i++) {
        var Picture = new Image;
        images.push(Picture);

        Picture.onload = (function (count) {
            return function () {
                console.log(count);
                imageDimensions.push({
                    width: this.naturalWidth,
                    height: this.naturalHeight
                });
            }
        })(i);

        Picture.src = "image/prod/" + i + ".jpg";
    }
}
fillArray();
Ответить с цитированием
  #6 (permalink)  
Старый 22.05.2016, 16:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,407

Bac9_AJlkaLLl,
function fillArray() {
    for (var i = 1; i <= quantity; i++) {
        var Picture = new Image;
        images.push(Picture);

        Picture.onload = (function (count) {
            return function () {
                console.log(count);
                imageDimensions[count]({
                    width: this.naturalWidth,
                    height: this.naturalHeight
                });
            }
        })(i - 1);

        Picture.src = "image/prod/" + i + ".jpg";
    }
}
fillArray();
Ответить с цитированием
  #7 (permalink)  
Старый 22.05.2016, 18:51
Новичок на форуме
Отправить личное сообщение для Bac9_AJlkaLLl Посмотреть профиль Найти все сообщения от Bac9_AJlkaLLl
 
Регистрация: 20.02.2015
Сообщений: 5

Собственно вот, какие каунты он выводит в данном случае, в предыдущей было практически тоже самое.
Изображения:
Тип файла: jpg screren.jpg (10.3 Кб, 2 просмотров)
Ответить с цитированием
  #8 (permalink)  
Старый 22.05.2016, 19:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,407

Bac9_AJlkaLLl,
и какая проблема то? вам же написали решение ещё в 3 посте, нужно было только -1 добавить.
var quantity = n =15,
    images = [],
imageDimensions = [];

function fillArray() {
    for (var i = 1; i <= quantity; i++) {
        var Picture = new Image;
        images.push(Picture);
        Picture.onload = function(a) {
            return function() {
                imageDimensions[a]({
                    width: this.naturalWidth,
                    height: this.naturalHeight
                });
                if (!--n) initProd()
            }
        }(i - 1);
        Picture.src = "image/prod/" + i + ".jpg"
    }
}
fillArray();

function initProd() {  // тут делайте что хотите с готовыми массивами
    console.log(images);
    console.log(imageDimensions)
};
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение рабочей области изображения pagemaster Общие вопросы Javascript 19 15.04.2013 17:06
Расчет реальных размеров изображения в галерее Vision Элементы интерфейса 7 10.07.2012 20:56
Проблема: Jquery - эффект раскрытия LightBox для изображения. woody2 jQuery 0 15.09.2011 23:10
Получение высоты изображения theo_ Javascript под браузер 2 21.06.2011 15:04
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 22:28