Question

我有一个网页，包括一些不同宽度和高度的图片，以提高加载页面的速度，我想实现延迟加载。但是默认的预加载图片总是具有不同尺寸的实际图片，因为我不知道图片的大小在加载之前。如何使预加载图像与真实图像的尺寸相同？

<script type="text/javascript" src="<?php echo G_STATIC_URL; ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo G_STATIC_URL; ?>/js/jquery.lazyload.min.js"></script>

$(function() {

        $("img").each(function() {
            $(this).attr("data-original",$(this).attr("src"));
            $(this).attr("src", "<?php echo G_STATIC_URL; ?>/common/loading_b.gif");
        });

        $("img").lazyload({
            placeholder : "<?php echo G_STATIC_URL; ?>/common/loading_b.gif",
            effect : "fadeIn"
        });
    });

Answer 1

在完全加载之前，您无法使用Javascript找到图像的尺寸。

如果您的HTML正在服务器上呈现，您可以将每个图像的宽度和高度直接打印到图像标记中：

<img src="..." width="<?= $width ?>" height="<?= $height ?>" />

另一个选择是为每个预加载框使用标准比率，并调整加载的图像大小以适应此比率，至少在图像加载时不会改变形状。

如何使预加载图像与真实图像的大小相同

1 个答案: