2015-04-15 1 views
1

В настоящее время я занимаюсь загрузкой файла с использованием html и javascript. У меня есть тег div без прокрутки и возможность показывать изображения и легко прокручивать вниз с помощью полосы прокрутки браузера. Теперь мне нужно изменить тег div, чтобы иметь полосу прокрутки, но когда я это сделал, интерфейс начал не отвечать на запросы при загрузке изображений.HTML: Прокрутка замедляется с помощью div scrollbar

Каждое изображение загружается по одному после каждой загрузки. Перед загрузкой я изменил размер и ориентировал изображение перед отправкой. Я пытался использовать рабочий поток, но он не может обрабатывать дом и т.д.

Есть другой способ повышения скорости ...

ниже код получить из Exif изображений и сделать ориентацию изображения

var loadingMetaImage = function (f, index, callback) { 
     loadImage.parseMetaData(
     f, 
     function (data) { 
     if (data.exif) 
     options = { canvas: true, orientation: data.exif.get('Orientation') }; 
     else 
     options = { canvas: true }; 

     loadImage(
     f, 
     function (img) { 
     callback(img.toDataURL('image/jpeg', 1.0)); 
     }, 
     options); 
     }); 
     }; 

код, который вызывая выше код и иметь его с измененным размером (размер шагом для достижения лучшего качества)

loadingMetaImage(file.unprocessed, file.index, function (data) { 
         self.imageResize(data, function (result) { 
         self.files[file.index].datas = data; 
         uploadFile(file.index, result, file.name, file.realName, file.hasReader); 
         }); 
         }); 
+0

Возможно ли это увидеть? Можете ли вы показать, что код работает где-то? – TheUknown

+0

Саймон, какие браузеры вы нацеливаете? Несколько лет назад, при использовании IE 6, я обнаружил, что производительность прокрутки 'div' была довольно плохая, когда у нее много контента. В то время решение, на котором мы остановились, состояло в том, чтобы отображать содержимое в 'iframe' вместо этого. Разумеется, это было не идеальное решение, но производительность была намного лучше. – Seamus

+0

Я использую хром, но я думаю, это из-за изменения размера изображения и выполнения ориентации, потому что браузер не отвечает ... Сравните с полосой прокрутки браузера, панель прокрутки div гораздо более очевидна. – LittleFunny

ответ

0

body{ 
 
    overflow: hidden; 
 
} 
 
.scroll-div{ 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    height: 60%; 
 
    width: 80%; 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 10%; 
 
    background-color: antiquewhite; 
 
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4); 
 
} 
 
p{ 
 
    position: absolute; 
 
    top: 70%; 
 
    left: 10%; 
 
    height: 40%; 
 
    width: 80%; 
 
    overflow: auto; 
 
}
<div class='scroll-div'> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
    Some text <br><br> 
 
</div> 
 
<p> 
 
The code there is: 
 
<br><br> 
 
body{<br> 
 
&nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden;<br> 
 
}<br> 
 
.scroll-div{<br> 
 
&nbsp;&nbsp;&nbsp;&nbsp;overflow-x: hidden;<br> 
 
&nbsp;&nbsp;&nbsp;&nbsp;overflow-y: auto;<br> 
 
&nbsp;&nbsp;&nbsp;&nbsp;/* Rest of styling */<br> 
 
}<br> 
 

 
</p>

Игнорируйте этот код, все, что вам нужно, находится в кнопке «Снять код фрагмента».