rendersubtree一次加载大量图像? [英] rendersubtree for loading a large amount of images at once?

问题描述

我在服务器上有很多图像(40.000)，它们在数据库表中的引用-名称，大小，日期，描述等.

I have a lot of images (40.000) on server and their references inside a db table - name, size, date, description etc.

试图一次加载所有图像，但只有100张可见，其余部分被css-display:none隐藏，并通过向下滚动使其可见.

Tried to load all images at once and only 100 of them to be visible, the rest are hidden by css - display:none and become visible by scrolling down.

结果-页面加载时间太长，新图像显示得非常慢.

Result - page loading takes too long and new images becomes visible very slow.

因此，我返回到旧方法-分页-逐步加载图像，单击next-prev按钮.

So I go back to the old method - pagination - loading images in steps, clicking on next-prev buttons.

现在，我看到了一个新的镶边功能-渲染子树

Now I see a new chrome feature - rendersubtree

这是一次加载所有40.000张图像并通过流畅滚动使其可见的解决方案吗?

Could this thing be a solution to load all 40.000 images at once and make them visible by scrolling fluently?

如果是-请提供任何代码示例.

If yes - pls any code example.

谢谢.

推荐答案

这取决于您的页面运行缓慢的原因.如果您使用display:none隐藏全部内容，则在这种情况下rendersubtree不太可能提供帮助.

It depends why your page is slow. If you're using display:none to hide a whole bunch of content, rendersubtree is unlikely to help in that case.

还有一个img解码API，可能对您有帮助 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/decode

There's also an img decode API which might help in your case https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode

但是，在您进入那里之前，我建议您进行一些分析，以准确确定过程中哪一部分很慢. (img加载/布局等)

But before you jump in there, I would recommend doing some profiling to figure out exactly which part of the process is slow. (img loading / layout / etc)

这篇关于rendersubtree一次加载大量图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！