javascript - 设置 Fancybox 图像大小

Question

我有一个 Fancybox 画廊，它使用以下 html 从一张图片加载一个包含另外 4 张图片的画廊:

<div id="gallery">
    <a class="fancybox1" href="exampleimages/a1b.jpg"><img src="exampleimages/a1s.jpg" alt=""/></a>

    <div class="hidden">
    <a class="fancybox1" href="exampleimages/a2b.jpg"><img src="exampleimages/a2s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a3b.jpg"><img src="exampleimages/a3s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a4b.jpg"><img src="exampleimages/a4s.jpg" alt=""/></a>
    </div>
</div>

href images 是显示的大图，src images 是缩略图。我知道如何在用于调用 fancybox 的 javascript 中设置缩略图大小:

$(document).ready(function() {
$(".fancybox1")
    .attr('rel', 'gallery')
    .fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
                       },
            thumbs  : {
                width   : 75,
                height  : 75
                        }
                    },

        padding : 0
    });//endfancy1

但是我不知道如何更改显示图像的大小。这样做比较好吗

1/根据缩略图在 javascript 中。

2/在 CSS 中(如果是，我如何链接到这个特定的图像？)

3/只需在实际图像文件到达网页之前将其设置为正确的大小，以便网页可以原封不动地显示它。

在上述这些方法中，哪一个是一般的最佳实践，而不仅仅是 Fancybox？我从来没有真正理解网页中的图像大小 - 但我假设如果 CSS 或 javascript 要调整图像大小，则必须加载整个(有时非常大)文件大小然后调整大小，而如果图像较小到首先，它会是一个更小、更快的下载。对吗？？

Answer 1

第 3 条是要走的路，假设您没有做一些疯狂的服务器端预处理来实现它。如果您知道您的图片将是 75x75，请将它们保存为 75x75 图片。

如果上述情况不适用，我个人更喜欢 CSS:您不必在设置大小之前等待 DOM 对象准备就绪，并且客户端调试会更容易一些。

.gallery .fancybox1 img
{
    width: 75px;
    height: 75px;
}

您对图像尺寸的所有假设都是绝对正确的。您还将处理跨浏览器的图像缩放不一致问题。理想的解决方案是只显示与原始图像完全相同的尺寸。当然，这并不总是可能/现实(流体布局设计等)。

虽然在这一点上。让它工作，把所有东西都拿出来，稍后优化。除非你在 healthcare.gov 上工作，否则这根本不是正确的方法；)