javascript - 大图(非常大的图)加载效果

Question

我有一个问题想和你分享。
所以就在这里。想象一下，我有一个非常大的图像，当我打开我的页面时它需要很重的负载。如果我想要将图像剪切成许多小块并在加载图像时将它们一个接一个地合并(只是 javascript、jquery、css 和 html 代码)，是否有可能。

HTML:

<div>
    <div style="float:left; width: 200px; height: 200px;">
        <img id="imgHeavy" src="http://i.stack.imgur.com/kLQe4.png" width="200"/>
    </div>
    <div id="frameMerge" style="float:left; width: 200px; height:200px; background: #ddd;">
    </div>
</div>

所以现在我想将我的元素(#frameMerge)的背景设​​置为打开页面时已剪切的图像(#imgHeavy)的每一 block 。
请看2张照片!

我的头像:

我的 div 元素:

任何想法将不胜感激!

Answer 1

你可以使用 css3 提供的多张背景图片的功能，但它最终不会更快，因为多张图片加载的数据(每个文件的标题信息)甚至比只加载一张更大.唯一的区别是，您会在加载其余部分之前看到部分图像。但是如果你的图像是 jpg，你可以有同样的效果。因此，您可以使用渐进式 jpg 来显示图像的一部分，而其余部分仍在加载中。