Question

我目前正在使用html和javascript处理文件上传。我有div标签没有滚动，能够显示图像，并使用浏览器滚动条轻松向下滚动。现在我必须更改div标签以使用滚动条，但是当我这样做时，界面在加载图像时开始无响应。

每次上传后，每张图片都会逐一加载。在上传之前，我在发送之前调整了图像的大小和方向。我试图使用工作线程，但它无法处理dom等。

还有其他提高速度的方法......

下面的代码从图像中获取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);
                        });
                        });

Answer 1

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>

忽略代码，您需要的一切都在“运行代码段”按钮中。

HTML：使用div滚动条滚动变慢

1 个答案: