图像延迟加载：实心矩形代替模糊图像
我正在尝试以一种懒散的方式在我的网站上显示几个图像，我尝试了两种选择：
备选案文1：
<img class="lazyload" loading="lazy" data-src="myimage" width="250" height="225" title="This is an image">
备选案文2：
<img class="lazyload" loading="lazy" src="fuzzy.jpg" data-src="myimage.jpg" width="250" height="225" title="This is an image">
两者都可以正常工作，“myimage.jpg”需要一点时间才能加载。然而，在最终加载之前，浏览器显示的第一个图标是丑陋的“无图像”图标。对于第二个，我花费资源加载'fuzzy.jpg'图像。是的，它的大小只有5-kb，但我想知道是否有一种SEO友好的方法，只显示（例如）浏览器创建的带有CSS背景色属性的“浅蓝色”矩形。
共有1个答案
无需请求即可内联SVG图像。这意味着它们将加载初始HTML，并且不会占用额外的资源。如果您愿意，您可以将其变得更加复杂（就所显示的内容而言），因为SVG非常轻量级。如何在图像中内联SVG等
编辑：如果您愿意，您也可以使用数据URL内联常规图像。但这并不是普遍的做法。
-
问题内容： 我正在开发一个eshop。在基于类别的产品页面上，我放置了一些基于javascript的过滤器。但是，如果类别具有很多产品，则会出现问题。该链接具有与我相似的功能… 这个页面多么缓慢，却超过2mb ！！！ 对我来说，每个产品都需要一半的K字节，但是图像是个问题。.因此，我正在寻找如何延迟加载图像的方法。由于与该网站不同，我的页面具有分页功能，因此我认为加载仅对页面可见的图像是一种解决方
-
我似乎不能为我的生活得到任何图像懒惰加载插件在wordpress工作。我尝试了懒负载，wp懒负载和bj懒负载。网站上的图像似乎没有一个是“懒惰加载”的。我也使用审计工具（chrome审计）测试了这个。当我删除图像（每页大约有50张图像）时，我的审计绩效和其他分数为99。当我加载图像（使用wordpress循环），我的性能下降到64. 我尝试了每一个延迟加载插件，但它们似乎都不是延迟加载。我正在本地
-
我试图使用jQuery懒惰加载在我的Laravel/Vue项目，但我正在努力让图像出现在我的Vue组件。我有以下img块，我认为会工作： 我确实在这里发现了另一个问题-Vue.js模板中的静态图像src-但是当我尝试该方法时，我得到了这样的结果： 因此，我切换回v-bind方法，但我得到的只是一个带有灰色边框的白色框-没有图像。但是，如果我在src属性上使用v-bind，我可以正确地看到图像。 我
-
我正在使用Mika Tuupola的jQuery延迟加载。 是否可以在每次延迟加载图像后调用函数。 我打算做的是跟踪图像的浏览次数。因此，如果图像是延迟加载的，这意味着用户已经看到了图像，我将通过在后台执行HTTP GET，将数据库中的计数器增加1。
-
Flask 通常配合装饰器使用，装饰器使用非常简单，而且使您可以将 URL 和处理它的函数 放在一起。然而这种方法也有一种不足: 这就意味着您使用装饰器的代码必须在前面导入， 否则 Flask 将无法找到您的函数。 这对于需要很快导入的应用程序来说是一个问题，这种情况可能出现在类似谷歌的 App Engine 这样的系统上。所以如果您突然发现您的引用超出了这种方法可以处理 的能力，您可以降级到中央
-
我想做一个reactjs页面懒惰加载图像。因此，我调用lazyLoadImages（）内部的组件didMount（）。我发现位于浏览器选项卡的浏览器加载指示器仍然一路旋转，直到加载所有图像。这让我认为我所做的并没有提供真正的懒惰加载图像体验。 有趣的是，如果我在setTimeout中用一个不太短的timeout参数包装lazyLoadImages（），例如100ms（不是0或甚至50ms），那么页