为不同的显示尺寸显示不同的 img，只下载可见的

Question

我在 Angular 中的组件上使用以下 html 来根据用户屏幕尺寸显示缩略图。

<div class="col-12 col-lg-3 col-md-6 col-sm-6 col-xs-12">
  <img class="d-none d-sm-none d-md-block d-lg-block img-fluid img-thumbnail" src="api/thumbnail/{{auctionListItem.thumbnailId}}/240/150/thumbnail.jpg">
  <img class="d-lg-none d-md-none img-fluid img-thumbnail" src="api/thumbnail/{{auctionListItem.thumbnailId}}/400/300/thumbnail.jpg">
</div>

在较小的屏幕上，图片占据了整个页面的宽度，对于这些用户，我会显示更大的图片。我也可以通过只拥有更大的图片并将其缩放以适合所有用户来解决这个问题。但这会为大约 50% 的网站访问者使用不需要的带宽。

不过我现在的问题是两张图片都在为每个人下载。

所以我的问题是，是否有 CSS 解决方案告诉浏览器只下载可见图像，如果没有，用 angular 解决这个问题的最佳方法是什么？我是否需要获取页面宽度并使用 *ngIf 隐藏未使用的图像标签？

Answer 1

我认为解决这个问题的最佳方法是 ts。这样你就减少了模板编译时间因为至少有两个条件。

我想你知道怎么做了，但是为了将来的用户，我写了下面的代码。

TS

this.imgSrc = window.innerWidth > 768 ? ('api/thumbnail/' + auctionListItem.thumbnailId + '/400/300/thumbnail.jpg') : ('api/thumbnail/' + auctionListItem.thumbnailId + '/400/300/thumbnail.jpg');

HTML

<div class="col-12 col-lg-3 col-md-6 col-sm-6 col-xs-12">
    <img class="img-fluid img-thumbnail" [src]="imgSrc">
</div>

Answer 2

如您所述，CSS 无法做到这一点，但是您可以通过 Angular 动态更改 src 属性来做到这一点。您必须将 window.innerWidth 值绑定到图像标签上的 [src] 值。所以像这样：

if (window.innerWidth > yourMediaQueryBreakpoint) {
  return this.loadSrcImg = 'your-image-url';
}

然后在模板中绑定：

<div class="col-12 col-lg-3 col-md-6 col-sm-6 col-xs-12">
  <img class="d-none d-sm-none d-md-block d-lg-block img-fluid img-thumbnail" [src]="loadSrcImg">
  <img class="d-lg-none d-md-none img-fluid img-thumbnail" [src]="loadSrcImg">
</div>

我还没有测试过，但希望对您有所帮助。

Answer 3

在 CSS 中使用媒体查询并仅将其用于打印，并替换为其他 URL 仅用于打印。您可能想要加载它但将其隐藏以确保下面的 onlyuseforprinting.jpg 在缓存中。显然这可能无法在 Chrome 上可靠地工作，除非图片在缓存中。

<style type="text/css">
@media print {
  #test:after {
    content: url("./images/onlyuseforprinting.jpg");
  }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/

Answer 4

CSS技巧的主要问题是所有图片都会被下载。尝试使用以下代码根据屏幕宽度仅下载特定照片。

<picture>
  <source media="(min-width: 800px)" srcset="images/large.jpg">
  <source media="(min-width: 450px)" srcset="images/small.jpg">
  <img src="images/large.jpg" alt="">
</picture>

或者试试这个

<img src="images/large.jpg" sizes="(max-width: 600px) 480px, 800px" srcset="images/small.jpg 480w, images/large.jpg 800w">

为不同的显示尺寸显示不同的 img，只下载可见的

Show different img for different display sizes and only download the visible one

css

twitter-bootstrap

bootstrap-4

angular

angular9