Question

我正在一个拥有图像块的网站上工作，这些图像块具有各种大小（相对宽度基于父级的当前大小，父级也具有与窗口相对的大小）。我使用jquery load事件根据图像对象的动态大小重写图像的src属性，以确保像素完美视图。问题是浏览器下载完整大小的图像，而不是用动态生成的图像替换它。这会导致不必要的负载和速度损失。

如果我将src值设为空，那么将正确的网址添加到其中会怎样？我想保持seo优化，所以空src可能不是一个好主意。我可以在没有双重下载图像的情也许我应该在浏览器开始下载src数据之前使用一个事件。

我的代码：

$('.image').load(function () {
    if (!$(this).hasClass('optimized')) {
        $(this).attr('src', '/image-perfection.php?image=' + encodeURIComponent($(this).attr('src')) + '&width=' + $(this).width());
        $(this).addClass('optimized');
    }
});

Answer 1

创建一个小缩略图，让您的图像指向相同的缩略图。

这样做的好处是，您可以指定一个“加载”图像，该图像将由浏览器预先捕获以用于下一个请求，然后您可以按照自己的方式加载图像。

您还可以编写一个代理脚本，为您剪切服务器中的图像，如果您正在处理上传的图像，可以在上传后剪切它们以优化过程，当然这取决于您的实现方式必须是。

在加载时使用jquery设置图像src

1 个答案: