Автор Тема: Время для загрузки изображения (локально)  (Прочитано 6157 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн ashes

  • Заглянувший
  • Новичок
  • *
  • Сообщений: 6
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Скрипт создаёт предварительные thumbnail\'ы (на стороне клиента) для фотографий, которые выбираются через input type="file". Примерно в половине случаев, особенно когда изображения большие (но не всегда), скрипт не определяет ширину или высоту выбранного изображения (определяет = 0). Из-за этого не создаётся thumbnail (потому что он пропорционален исходному изображению).

Мне кажется, что это из-за того, что браузеру не хватает времени, чтобы подгрузить и вычислить размеры изображения. Можно ли как-нибудь увеличить это время, организовать задержку (setTimeout() не помогает, зато помогает предварительно вызванный alert(), но не могу же я пугать пользователей alert\'ами). Пожалуйста, помогите. Я просто измучалась с этим скриптом.

Спасибо.

Оффлайн CGVictor

  • теперь местный
  • Глобальный модератор
  • Ветеран
  • *****
  • Сообщений: 2511
  • +0/-0
  • 2
    • Просмотр профиля
    • http://cg.net.ru
Время для загрузки изображения (локально)
« Ответ #1 : 30 Августа 2005, 17:05:11 »
ashes
Подробнее? Про thumbnail (каким образом) и определение ширины/высоты.
LJ: Backslashed life (rss)

Оффлайн ashes

  • Заглянувший
  • Новичок
  • *
  • Сообщений: 6
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Время для загрузки изображения (локально)
« Ответ #2 : 31 Августа 2005, 10:33:00 »
Протестировать и посмотреть код можно здесь:

http://www.tcomplex.ru/temp/test_boxes.html

В общих чертах функция работает очень просто:

file_src = document.getElementById(filefield).value;
(где filefield - id поля input type="file")

image_src = file_src.replace(/\\\\/g, \'/\');

***
var img = new Image();
img.src = image_src;

***
img_height = img.getAttribute(\'height\');
(здесь скрипт иногда не определяет высоту, и тогда thumbnail не создаётся)

Оффлайн CGVictor

  • теперь местный
  • Глобальный модератор
  • Ветеран
  • *****
  • Сообщений: 2511
  • +0/-0
  • 2
    • Просмотр профиля
    • http://cg.net.ru
Время для загрузки изображения (локально)
« Ответ #3 : 31 Августа 2005, 12:14:52 »
ashes
Что тестировать - немного не ясно, т.к. у меня, например, вообще ничего (кроме кнопки "обзор") не заработало.

Идею вкратце понял: ты хочешь перед отправкой файла на сервер показать превьюху.

Обломаю: в большем количестве случаев нарвешься на ограничения безопасности. Просто не даст прочитать локальный файл.
LJ: Backslashed life (rss)

Оффлайн ashes

  • Заглянувший
  • Новичок
  • *
  • Сообщений: 6
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Время для загрузки изображения (локально)
« Ответ #4 : 31 Августа 2005, 12:39:27 »
Забыла сказать, что это версия - для IE (4 и выше). В Opere (или firefox\'e) она действительно не сработает. Если у тебя есть IE, можешь посмотреть с помощью него, пожалуйста?

При чём тут ограничения безопасности - пользователь на своём компьютере смотрит свой же файл... Это обычный тэг img. (Скрипт на javascript. Естественно, если javascript не разрешён, ничего не получится).

В любом случае, скрипт уже написан и работает. Он не срабатывает только иногда, но вовсе не из-за какой-то там безопасности, а из-за того, что браузеру не хватает времени (или чего то ещё), чтобы подгрузить картинку в свой кэш (или куда он там её грузит) и определить её геометрические размеры. Что мне с этим делать?

Оффлайн CGVictor

  • теперь местный
  • Глобальный модератор
  • Ветеран
  • *****
  • Сообщений: 2511
  • +0/-0
  • 2
    • Просмотр профиля
    • http://cg.net.ru
Время для загрузки изображения (локально)
« Ответ #5 : 31 Августа 2005, 14:43:16 »
ashes
IE6: не работает.

По существу вопроса: не срабатывает из-за того, что браузер не успевает загрузить изображение.
Есть вариант вешать обработку изображения на img.onLoad

Пользователь не "на своём компьютере смотрит свой же файл", а чужой скрипт читает и обрабатывает файл с его локального диска (пусть и выбранный). Как бы то ни было, в IE6 с дефолтовой безопасностью у меня не работает.
LJ: Backslashed life (rss)

Оффлайн ashes

  • Заглянувший
  • Новичок
  • *
  • Сообщений: 6
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Время для загрузки изображения (локально)
« Ответ #6 : 31 Августа 2005, 15:40:47 »
c img.onLoad результат тот же (по-моему, это событие означает начало загрузки, а не конец).
Потому что я пишу:
img.onLoad = alert(img.complete); и периодически вижу false...
(свойство complete как раз показывает, завершена ли загрузка)

Насчёт безопасности - что же делать...  (Хотя я только что поставила безопасность на дефолтовый уровень, и всё продолжает работать). Значит, те, у кого безопасность достаточно высокая, не увидят предпросмотра. Другого выхода нет. Или есть?

А в чём выражается "не работает"? Он хотя бы имя файла подписывает сверху и путь в текстовом поле снизу? (навряд ли...)

Спасибо, что уделяете мне своё время.

Оффлайн CGVictor

  • теперь местный
  • Глобальный модератор
  • Ветеран
  • *****
  • Сообщений: 2511
  • +0/-0
  • 2
    • Просмотр профиля
    • http://cg.net.ru
Время для загрузки изображения (локально)
« Ответ #7 : 31 Августа 2005, 16:47:43 »
ashes
Наверху имя файла пишет. А загружать - не загружает.

Можно так:
while(img.complete) {
  //т.е. пустой цикл до загрузки
}
Но ругнется, скажет "исполнение скрипта может занять время"

onLoad - событие, срабатывающее после полной загрузки элемента
LJ: Backslashed life (rss)

Оффлайн ashes

  • Заглянувший
  • Новичок
  • *
  • Сообщений: 6
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Время для загрузки изображения (локально)
« Ответ #8 : 31 Августа 2005, 19:12:45 »
Значит всё-таки дело не в безопасности... И thumbnail создаётся и отображается, только с нулевой высотой...

Если событие onLoad срабатывает при полной загрузке, почему тогда img.onLoad = alert(img.complete); иногда выводит false?

while(img.complete == false) - не только ругнётся, но ещё и начнёт подвисать, а загрузить - всё равно не загрузит :(

Пока помогает только вызов alert() там, где определяется высота:

img_height = img.getAttribute(\'height\');
alert(img_height); //этот скорее всего выдаст 0
img_height = img.getAttribute(\'height\');
alert(img_height); //а этот - правильную высоту

Оффлайн virka

  • Завсегдатай
  • Пользователь
  • **
  • Сообщений: 68
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Время для загрузки изображения (локально)
« Ответ #9 : 31 Августа 2005, 20:47:20 »
Если не ошибаюсь, мне иногда в таких случаях помогал цикл
var img_height=0;
while(img_height==0)
{img_height=img.getAttribute(\'height\');}

Оффлайн ashes

  • Заглянувший
  • Новичок
  • *
  • Сообщений: 6
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Время для загрузки изображения (локально)
« Ответ #10 : 01 Сентября 2005, 08:37:14 »
virka, нет, получается та же история, что и с while(img.complete == false) (виснет, то есть).

Есть какой-нибудь способ организовать задержку?

Оффлайн virka

  • Завсегдатай
  • Пользователь
  • **
  • Сообщений: 68
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Время для загрузки изображения (локально)
« Ответ #11 : 01 Сентября 2005, 11:13:53 »
ну еще можно попробовать setTimeout, только поставить его в цикл.
function getHeight()
{
var img_height=img.getAttribute(\'height\');
if(img_height==0){setTimeout("getHeight()",1000);}
else{return img_height;}
}
img нужно сделать, конечно, глобальной.

Оффлайн virka

  • Завсегдатай
  • Пользователь
  • **
  • Сообщений: 68
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Время для загрузки изображения (локально)
« Ответ #12 : 01 Сентября 2005, 11:19:20 »
Только функцию, конечно, лучше назовите не getHeight :)

Оффлайн CGVictor

  • теперь местный
  • Глобальный модератор
  • Ветеран
  • *****
  • Сообщений: 2511
  • +0/-0
  • 2
    • Просмотр профиля
    • http://cg.net.ru
Время для загрузки изображения (локально)
« Ответ #13 : 01 Сентября 2005, 12:41:01 »
virka ashes
Если уж говорить глобально, то я бы вышеизложенную задачу решал средствами сервера. Потому как если юзер туда необработанный JPEG метра на 4 сунет, то сдохнет не только скрипт, но и instance браузера...
LJ: Backslashed life (rss)

 

Sitemap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28