代码之家 › 专栏 › 技术社区 › Basj

如何使用CSS防止加载<img src=“url”>?

image css html

Basj · 技术社区 · 6 年前

假设我有这样一个图像:

<img src="https://via.placeholder.com/150" class="abcd" />

如何在仅使用CSS的情况下使url https://via.placeholder.com/150 从来没装过吗?

我试过:

.abcd { display: none; } :获取图像的操作仍然完成(您可以通过浏览器的 Developer Tools > Network )
.abcd { visibility: hidden; } :同上
把 <img> 在一个 <div> 它本身就在 display: none; :idem,图像的GET请求仍然完成
我试过这个方法 Is it possible to set the equivalent of a src attribute of an img tag in CSS? :
```
.abcd { content:url("https://via.placeholder.com/200"); }
```
但两者都有 https://via.placeholder.com/150 和 https://via.placeholder.com/200 都装了子弹。
.abcd { content: none; } 也不管用

应用:我正在尝试为电子邮件创建1px跟踪系统,我想通过注入自定义CSS(带触控笔chrome扩展,uBlockOrigin)来防止跟踪我自己的视图

注:当然,我已经读过了 Does "display:none" prevent an image from loading? 但它并没有给出这个相关问题的确切解决方案。

0 回复 | 直到 6 年前

Temani Afif 6 年前

应用:我正在尝试为电子邮件创建1px跟踪系统,我想通过注入自定义CSS(带触控笔chrome扩展,uBlockOrigin)来防止跟踪我自己的视图

为什么不做相反的事情,默认情况下不加载图像,然后在需要时加载它。

下面是一个使用CSS变量的想法

img {
  content:var(--img);
}

/* The CSS to disable the loading
img {
  --img:initial!important;
}
*/

<img style="--img:url('https://via.placeholder.com/150')" class="abcd" />

另一个没有CSS变量的想法是默认情况下加载图像。确保尽早加载CSS以避免加载。

/*to disable the loading. Make sure it's considered before the inline style
img {
  content: none!important;
}
*/

<img style="content:url('https://via.placeholder.com/150')" class="abcd" />

Basj 6 年前

蒂姆·卡德莱克已经在一个月前做了很多测试 this page .

简言之,具有 <img> :

<div id="test1"><img src="images/test1.png" alt="" /></div>

将始终加载,即使是:

#test1 { display:none; }

相反,使用 div 具有 background-image 这样地:

<div id="test1"><div style="background-image: url('https://via.placeholder.com/159');"></div></div>

将允许在使用时不加载图像 #test1 { display:none; } .

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前