您好：
我为自己创建了一个摄影作品集： http://www.photography.tommcpadden.com/gallery
情况：
图库索引中的照片是背景图像，因此它们可以随分辨率流动变化，同时尺寸和维持比例相同。
但画廊索引中的照片太大，加载时间太长。它们的桌面宽度为1000像素，手机/平板电脑宽度为700像素。为了解决这个问题，我创建了较低质量的较小版本，因此文件大小加载到下面的元素中，这样访问者可以在加载更高质量的照片时看到一些东西，这非常有效！
问题：
问题在于浏览器有时会首先加载较大的背景图像，这使得这一点毫无意义。
守则：
<li>
<a href="LINK HERE">
<div class="photobg" style="backgrond:url('small.jpg');">
<div class="photobg" style="backgrond:url('big.jpg');"></div>
</div>
</a>
</li>
正如您所看到的，两个DIV标签都有一个背景图像，一个在另一个上面，这样当大图像加载时，小图像将被大图像替换。
目标：
我想在大背景图像之前加载小背景图像，以便访问者在加载大图像时可以查看。
如果您有其他解决方案，我会很高兴听到它。
感谢您的时间：）