ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вывод картинок в цикле загрузки
25 сообщений из 90, страница 2 из 4
  2  все
Вывод картинок в цикле загрузки
    #39346513
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAвадяskyANA ! за идею отдельное спасибо.
но только можно и без setTimeout.setTimeout я для IE впиндюрил: 19888451 .
слона не заметил :)
...
Рейтинг: 0 / 0
13.11.2016, 22:24
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346514
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,
ну за это отдельное спасибо,
просто не было таких задач , чтоб требовалось
ну тут вот и задача и решение :)
...
Рейтинг: 0 / 0
13.11.2016, 22:28
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346515
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Кстати ускоряем асинхронный вариант в Firefox:

Код: html
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.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
<!DOCTYPE html>
<html>
<head></head>
<body>
  <input accept="image/jpeg" multiple onchange="onChange(this)" type="file">
  <div id="fileNames"></div>
  <div id="fileViews"></div>
  <script>
    var fileNames = document.querySelector('#fileNames'),
        fileViews = document.querySelector('#fileViews'),
        urlFactory = window.URL || window.webkitURL;

    function onChange(sender) {
      previewAll(sender.files);
    }

    function previewAll(files) {
      var i, l = files.length;
      
      previewImage(0);
      
      function previewImage(i) {
        var file = files[i], fileName, image, imageBlob, reader;

        fileName = document.createElement('SPAN');
        fileName.innerHTML = file.name + ' &nbsp; &nbsp; &nbsp;';
        fileNames.appendChild(fileName);

        reader = new FileReader();
        reader.onloadend = function() {
          image = new Image();
          imageBlob = new Blob([reader.result], { type: "image/jpeg" });
          image.height = 200;
          image.src = urlFactory.createObjectURL(imageBlob);

          fileName.style.color = 'red';
          fileViews.appendChild(image);
            
          i = i + 1;
          
          if (i < l) {
            previewImage(i);
          }
        }
        reader.readAsArrayBuffer(file);
      }
    }
  </script>
</body>
</html>


http://plnkr.co/edit/DHhuC0mU3RV7uu2viKF6?p=preview
...
Рейтинг: 0 / 0
13.11.2016, 22:31
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346516
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Кстати в IE он тоже шустро работает и setTimeout не нужен.

И надо ещё прописать
Код: javascript
1.
2.
image.style.height = '200px';
image.style.width = 'auto';


вместо
Код: javascript
1.
image.height = 200;
...
Рейтинг: 0 / 0
13.11.2016, 22:35
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346518
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,

только последний вариант странно работает в мозиле, имена по порядку, а картинки показывает (отображает, выводит) в случаном месте, а хром последовательно
...
Рейтинг: 0 / 0
13.11.2016, 22:44
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346525
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANA,

только последний вариант странно работает в мозиле, имена по порядку, а картинки показывает (отображает, выводит) в случаном месте, а хром последовательно
Что значит в случайном месте? Загружаются и выводятся они последовательно. Просто рендерятся хаотично.

Ну заметно быстрее, чем в твоём варианте :)
...
Рейтинг: 0 / 0
13.11.2016, 22:58
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346527
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадя, обрати внимание на то, что я использую reader.onloadend , а не reader.onload .
Так как последнее событие вызывается только при успешном чтении файла. Хотя может тебе и надо, чтобы "прогресс" прервался.

Также не зачем вызывать
Код: javascript
1.
$('#list_files').find('span[data-pic="' + i + '"]')


Метод .append() вернёт тебе ссылку на нужный span и не надо его искать.

Ну и код твой не плохо бы причесать для читабельности :)
...
Рейтинг: 0 / 0
13.11.2016, 23:03
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346530
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAвадяskyANA,

только последний вариант странно работает в мозиле, имена по порядку, а картинки показывает (отображает, выводит) в случаном месте, а хром последовательно
Что значит в случайном месте? Загружаются и выводятся они последовательно. Просто рендерятся хаотично.

Ну заметно быстрее, чем в твоём варианте :)
вот это и плохо, , что так рендерится
...
Рейтинг: 0 / 0
13.11.2016, 23:10
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346534
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAвадя, обрати внимание на то, что я использую reader.onloadend , а не reader.onload .
Так как последнее событие вызывается только при успешном чтении файла. Хотя может тебе и надо, чтобы "прогресс" прервался.

Также не зачем вызывать
Код: javascript
1.
$('#list_files').find('span[data-pic="' + i + '"]')


Метод .append() вернёт тебе ссылку на нужный span и не надо его искать.

Ну и код твой не плохо бы причесать для читабельности :)
1) это в данном случае не критично. но эту разницу знаю.
2) там логика несколько другая, поэтому так сделано, здесь вариант для «показа» варианта.
3) отлажу под конкретное своё — причешу.
...
Рейтинг: 0 / 0
13.11.2016, 23:21
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346592
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANAпропущено...

Что значит в случайном месте? Загружаются и выводятся они последовательно. Просто рендерятся хаотично.

Ну заметно быстрее, чем в твоём варианте :)
вот это и плохо, , что так рендерится
Да нормально. Просто дай задержку, прежде чем следующую картинку загружать.
С ней тоже будет гораздо быстрее, чем при использовании readAsDataURL .
...
Рейтинг: 0 / 0
14.11.2016, 09:01
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346593
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANAвадя, обрати внимание на то, что я использую reader.onloadend , а не reader.onload .
Так как последнее событие вызывается только при успешном чтении файла. Хотя может тебе и надо, чтобы "прогресс" прервался.

Также не зачем вызывать
Код: javascript
1.
$('#list_files').find('span[data-pic="' + i + '"]')



Метод .append() вернёт тебе ссылку на нужный span и не надо его искать.

Ну и код твой не плохо бы причесать для читабельности :)
1) это в данном случае не критично. но эту разницу знаю.
2) там логика несколько другая, поэтому так сделано, здесь вариант для «показа» варианта.
3) отлажу под конкретное своё — причешу.
А на мой взгляд хорошо быть более профессиональным, когда выкладываешь код на публичный форум, где его могут посмотреть, скопировать и использовать другие люди.
...
Рейтинг: 0 / 0
14.11.2016, 09:03
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346595
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
сокращённй вариант, убрано всё "лишнее"
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
                
                document.getElementById('file').addEventListener('change', function (evt) {
                    urlFactory = window.URL || window.webkitURL;
                    var n = evt.target.files.length;
                    var a = 0;
                    for (var i = 0; i < n; i++) {
                        $('#list_files').append('<span data-pic="' + i + '">█</span>');  //формирование длины прогрессбара
                    }
                    read_file(this.files[a], a);
                    function read_file(file, i) {
                        var reader = new FileReader();
                        reader.onload = function () {
                            $('#pic_div').append('<img src="' + urlFactory.createObjectURL(new Blob([reader.result], {type: "image/jpeg"}))  + '" alt="" />');
                            $('#list_files').find('span[data-pic="' + i + '"]').css('color', 'red'); //отобрвзение загрузки на прогрессбаре
                            if (a++ < (n - 1)) {
                                read_file(evt.target.files[a], a);
                            }
                        };
                        reader.readAsArrayBuffer(file);
                    }
                }, false);
...
Рейтинг: 0 / 0
14.11.2016, 09:06
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346599
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
авторА на мой взгляд хорошо быть более профессиональным, когда выкладываешь код на публичный форум, где его могут посмотреть, скопировать и использовать другие люди.
здесь тоже публичный форум.
...
Рейтинг: 0 / 0
14.11.2016, 09:10
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346600
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяавторА на мой взгляд хорошо быть более профессиональным, когда выкладываешь код на публичный форум, где его могут посмотреть, скопировать и использовать другие люди.
здесь тоже публичный форум.
Спасибо, кэп :) Я тебе вежливый совет даю.
...
Рейтинг: 0 / 0
14.11.2016, 09:12
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346601
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,
иногда важна голая идея, из которой можно развить что угодно :)
...
Рейтинг: 0 / 0
14.11.2016, 09:17
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346604
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадя, вот этого я в упор в твоём коде не понимаю:
Код: javascript
1.
$('#list_files').append('<span data-pic="' + i + '">█</span>')


Код: javascript
1.
$('#list_files').find('span[data-pic="' + i + '"]')


Во первых зачем 2 * n раз искать элемент с иденттификатором list_files ?
Во вторых зачем задавать span-у атрибут, куда прописывать индекс картинки, а потом искать по атрибуту со значением этого индекса, когда можно по индексу тупо достать дочерний элемент?
...
Рейтинг: 0 / 0
14.11.2016, 09:22
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346605
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANA,
иногда важна голая идея, из которой можно развить что угодно :)
Отмаза не канает, судя по данному топику пока ты свою голую идею обдумывал, я успел код написать, оформить, протестировать в разных браузерах, оптимизировать и ещё и вариант с воркером посмотреть.
...
Рейтинг: 0 / 0
14.11.2016, 09:26
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346624
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAвадя, вот этого я в упор в твоём коде не понимаю:
Код: javascript
1.
$('#list_files').append('<span data-pic="' + i + '">█</span>')


Код: javascript
1.
$('#list_files').find('span[data-pic="' + i + '"]')


Во первых зачем 2 * n раз искать элемент с иденттификатором list_files ?
Во вторых зачем задавать span-у атрибут, куда прописывать индекс картинки, а потом искать по атрибуту со значением этого индекса, когда можно по индексу тупо достать дочерний элемент?
согласен.
...
Рейтинг: 0 / 0
14.11.2016, 10:12
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346631
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
авторОтмаза не канает, судя по данному топику пока ты свою голую идею обдумывал, я успел код написать, оформить, протестировать в разных браузерах, оптимизировать и ещё и вариант с воркером посмотреть.
тут дело не в том, что ты успел, а я не успел, мне нужно было применить эту идею в моём коде , а не просто кусок вставить. собственно код мне щас и помнить не надо , он может быть разным, а вот сама идея - её можно применять .
а то, что ты успел - так это взять одну вещь и рассмотреть со всех сторон. тут у нас разные цели. отобразить картинки для меня несамоцель, а маленький шажок.
...
Рейтинг: 0 / 0
14.11.2016, 10:23
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346633
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяавторОтмаза не канает, судя по данному топику пока ты свою голую идею обдумывал, я успел код написать, оформить, протестировать в разных браузерах, оптимизировать и ещё и вариант с воркером посмотреть.
тут дело не в том, что ты успел, а я не успел, мне нужно было применить эту идею в моём коде , а не просто кусок вставить. собственно код мне щас и помнить не надо , он может быть разным, а вот сама идея - её можно применять .
а то, что ты успел - так это взять одну вещь и рассмотреть со всех сторон. тут у нас разные цели. отобразить картинки для меня несамоцель, а маленький шажок.
Да я к тому, что код оформить, перед тем как постить - это минутное дело. Не надо лень прикрывать какими-то идеями :)
...
Рейтинг: 0 / 0
14.11.2016, 10:28
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346635
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяотобразить картинки для меня несамоцель, а маленький шажок
Эх, долго же тебе идти. Удачи! :)
...
Рейтинг: 0 / 0
14.11.2016, 10:30
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346735
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
skyANAНе надо лень прикрывать какими-то идеями :)
подпишусь). Есть у Вади такой грешок с причёсыванием кода).
...
Рейтинг: 0 / 0
14.11.2016, 11:52
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39347627
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
В защиту Вади - у него свой стиль,

для меня одинаково дико, что так
Код: javascript
1.
 i = i + 1;



что так
Код: javascript
1.
if (a++ < (n - 1)) {



Я себе некоторые хаки позволяю типа
Код: javascript
1.
!~str.indexOf(',')



Но стараюсь их делать как можно меньше, т.к. не всегда с утра разберешь чего "гениального" тут навоял.

Код должен поддерживаться, пока один и тебе комфортно, можно писать как хочешь.
...
Рейтинг: 0 / 0
15.11.2016, 15:14
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39347659
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mage.lan,

Код: javascript
1.
if (a++ < (n - 1)) {


по поводу конкретного случая - я просто не смог тут ничего лучшего, если есть вариант - предлагайте
данная строка и мне не нравится.


авторЯ себе некоторые хаки позволяю типа
!~str.indexOf(',')
мне они тоже нравятся, только как их вспомнишь....
...
Рейтинг: 0 / 0
15.11.2016, 15:45
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39347783
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
Сейчас бы писал так:
Код: javascript
1.
2.
3.
4.
5.
if (a < n - 1) 
{
     a++;
     read_file(evt.target.files[a], a);
}


по молодости бы писал так:
Код: javascript
1.
2.
if (a < n - 1) 
     read_file(evt.target.files[++a], a);
...
Рейтинг: 0 / 0
15.11.2016, 17:26
| Ответить | Цитировать | Написать  
25 сообщений из 90, страница 2 из 4
  2  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вывод картинок в цикле загрузки
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]