js获取背景图片来源的大小

在JavaScript中，获取背景图片的尺寸可以通过以下步骤实现：

基础概念

背景图片：通常通过CSS的background-image属性设置。
图片尺寸：指的是图片的宽度和高度。

类型与应用场景

类型：主要涉及CSS背景图片和HTML <img> 标签中的图片。
应用场景：
- 自适应布局调整。
- 图片懒加载前的预判。
- 动态调整图片显示大小。

示例代码

以下是一个示例代码，展示如何使用JavaScript获取背景图片的尺寸：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取背景图片尺寸</title>
<style>
  #bgImage {
    width: 300px;
    height: 200px;
    background-image: url('example.jpg');
    background-size: cover;
  }
</style>
</head>
<body>

<div id="bgImage"></div>

<script>
function getImageSize(url, callback) {
  var img = new Image();
  img.onload = function() {
    callback(img.width, img.height);
  };
  img.src = url;
}

// 获取背景图片的实际尺寸
var bgImageElement = document.getElementById('bgImage');
var backgroundImageUrl = getComputedStyle(bgImageElement).backgroundImage.slice(5, -2); // 去掉url()的引号

getImageSize(backgroundImageUrl, function(width, height) {
  console.log('背景图片尺寸：', width, 'x', height);
});
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：跨域问题

如果图片位于不同的域，可能会遇到跨域访问限制。

解决方法：

确保图片服务器设置了适当的CORS（跨源资源共享）头。
或者将图片存储在与当前页面相同的域下。

问题2：图片未完全加载

在图片还未完全加载时尝试获取其尺寸会导致错误。

解决方法：

使用img.onload事件确保图片完全加载后再获取尺寸。

问题3：缓存问题

浏览器缓存可能导致获取到的图片尺寸不是最新的。

解决方法：

在图片URL后添加一个随机参数或时间戳，以避免缓存问题。

通过上述方法，可以有效地获取并处理背景图片的尺寸信息，从而优化网页的性能和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

在reactjs应用程序中获取.scss文件中的环境变量

、、、、

我有一个场景，我将通过CDN获取背景图片URL，CDN的基本路径在环境文件中设置。因为我只能访问.js文件中的环境变量，而不能访问.scss中的环境变量，所以不可能在.scss中定义样式。我可以使用内联样式，但我想通过媒体查询来显示/隐藏基于设备大小的背景图像。但我不能在.js中得到它。那么，有什么解决方案吗？

浏览 0提问于2018-10-31得票数 0

1回答

如何将整个背景反向移动到鼠标指针p5.js的光标

、

我想让我的背景移动到鼠标光标所在的位置，就像这样。由于鼠标光标位于左上角，背景图片应向下右转。由于鼠标光标位于右上角，背景图片应向下左转。背景照片应该是无限的，可以用x和y大小填充整个画布。我怎样才能用p5.js做到这一点呢？

浏览 6提问于2017-03-08得票数 0

回答已采纳

1回答

有没有一种合适的方法将alt文本添加到背景图像中，或者，我如何为我正在使用这种技术的图像提供alt文本？我曾考虑过使用retina.js来解决这个问题，但后来我开始使用带宽来处理常规大小的图像和双倍大小的图像。我知道在stackoverflow和其他地方还有其他讨论alt文本和背景图片的帖子，但我发现的帖子可以追溯到视网膜显示之前。我看过一些帖子说alt文本不应该应用于背景图片，那么人们有什么建议

浏览 0提问于2014-04-25得票数 0

2回答

阶段-我的图像不加载

、

我是新来的相控器。我开始看youtube连续剧，我第一次遇到问题。我的背景图片没有加载。我有这个js代码 },}; game.state.add('GameState',GameS

浏览 13提问于2017-01-14得票数 1

回答已采纳

1回答

按月更改背景图像

、

我想根据android studio的文本框中显示的日期来更改背景图片。例如，如果日期是1月1日，则背景图像将按1月显示。如果日期是2- Feb，那么背景图像将按照Feb来。也就是说，每个月都有不同的背景图像。

浏览 0提问于2017-03-07得票数 0

1回答

主页上的背景图像延伸

、、

我目前正试图使我的背景图片在我的主页延伸到整个页面，但我有困难，因为当我试图调整窗口大小时，它会变小？这是我的密码： body{ background-color:black;

浏览 1提问于2015-10-03得票数 2

回答已采纳

3回答

更快地加载网站图片

、

有没有可能改善网站的背景图片，以加载更快，它是。我的网站背景图片大小为1258X441，内存大小为656KB。它花了太长的时间来加载完整的背景图片，同时访问我的网站。有没有比压缩(因为图像已经被压缩了)来提高加载速度的方法。

浏览 2提问于2011-09-02得票数 1

回答已采纳

1回答

如何在服务器端调整图像大小

、、、

问题是图像大小(+-5MB)。这些图片是div的背景图片。我使用JS来改变这个背景图像(有时每秒1张)。有没有办法缩小这些图像或加快加载速度？(我不能用Photoshop或其他类似的软件修改这张图片。

浏览 1提问于2012-08-13得票数 0

2回答

背景尺寸在移动设备上不起作用

、、

我真的不知道为什么会这样，我猜我累了，但问题是“背景大小”在我的移动设备上不起作用，就在我试图在我的PC上使用的浏览器上模拟的时候。PC看起来像这样：阿!

浏览 0提问于2017-11-04得票数 1

1回答

在可展开列表视图中设置组的背景图像的问题

、

我有一个ExpandableListView，我正在设置群扩展时的背景图片，但是当我设置背景图片大小为群组的当前背景时，会出现问题。见下图

浏览 2提问于2013-01-29得票数 0

回答已采纳

1回答

如何使用Java暂时禁用桌面壁纸到黑色屏幕

是否有一个更好的选项来暂时禁用桌面墙纸，直到计算机上运行应用程序。

浏览 2提问于2013-09-01得票数 0

3回答

Googlebot会索引CSS背景图片吗？

、、、

这些图像不是通过js动态加载的，它们是在页面加载时出现的。我的问题很简单: googlebot会索引那些css定义的背景图片吗？或者他们没有被googlebot索引的能力？如果能弄清楚这一点就太好了。对于加分-通过内联css定义的背景图像与通过外部css定义的背景图像，这对googlebot有什么不同吗？额外的信用，如果你可以告诉我任何谷歌来源，专门谈到这一点。谢谢大家！

浏览 2提问于2013-01-23得票数 1

回答已采纳

2回答

获取背景图片的最终大小

、、、、

有没有一种简单的方法，即使应用了background-size属性，也可以使用Javascript或jQuery获得背景图像的最终高度和宽度？我的意思是，我知道我可以获得背景图像的url，并将其加载到Image对象中，然后获得宽度和高度。但它是源图像的大小。如果有人使用CSS对其进行缩放，则大小会发生变化它与标记为相似的问题不同，因为它没有说明如果有人更改了background-size，如何以像素为单位获

浏览 4提问于2015-05-02得票数 9

1回答

根据背景大小拉伸容器高度

、、、、

只需阅读说明即可)所以我想要实现的是让svg背景根据蓝色容器的宽度拉伸，并保持它的比例。此外，我希望第二个容器根据它的背景改变高度，这样整个s

浏览 3提问于2015-12-04得票数 0

1回答

响应性的div元素和背景图片一样？

、、、

我得到了背景图片，我需要设置为容器背景图片。但是我不知道该怎么做。no-repeat; overflow: hidden;} 到目前为止，我尝试了这个，如果我正在设置例如excat大小的背景上的移动高度大小将太多

浏览 0提问于2021-03-06得票数 0

0回答

ticSdk 设置新增白板并设置背景图片错误？

调研互动课堂的 ticSdk.getBoardInstance().addBackgroundPic 新增白板并添加背景图片接口报js错误，直接设置背景图片接口是好的 at d.addBackgroundPic (board_sdk.mini.js:1) at online.addBackgrou

浏览 245提问于2018-11-24

3回答

调整按钮C#中图像(而不是背景图像)的大小

、、、、

我在按钮中插入了一张图片，但它不是背景图片。因此，我想调整图像的大小，例如Height=30, Width=20或某个时候的Height=50, Width=50。有些人告诉我，如果我将图片作为背景图片插入，它是possible.However，如果我坚持要调整图片的大小，那么在按钮中调整图片是不可能的。我不相信没有人能做到这一点。

浏览 0提问于2016-10-07得票数 1

2回答

控制图像大小@右上角css

、

我正在构建一个使用HTML和CSS的报告。我正在处理一个在打印时在页面上重复的标题。为了实现这一点，我使用了@page属性，并特别尝试在@top-right中插入一张图片。如果这是一个超文本标记语言中的<img>，我会这样调整它的大小：但是，我不能这样做，因为图像是通过url()引入的。有人知道如何控制图像的大小吗？对于完整的信息，我正在

浏览 2提问于2018-09-18得票数 0

1回答

UISegmentedControl backgroundImageForState未返回我的图像

、、、

我使用UIApperance在我的UISegmentedControl中设置背景图片，如下所示： barMetrics:UIBarMetricsDefault]; 然而，我的图像比标准的UISegmentedControl大小要高。因此，稍后，我尝试获取控件

浏览 0提问于2012-12-01得票数 3

2回答

响应式设计的相对定位

、、

我正在尝试一个接一个地定位div，当div相对定位时很容易实现，但我希望每个div都适合浏览器的大小。moz-background-size: cover; background-size: cover;因此，#test-1可以缩放以适应浏览器的大小，然后当您缩小规模时，#test-2也适合浏览器的大小，依此类推。但是我已经通过绝对地定位它们并从顶部设置#test-2 101%来实现这些，我不想在每次添加另一个d

浏览 4提问于2013-01-23得票数 1

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js获取背景图片来源的大小

基础概念

相关优势

类型与应用场景

示例代码

可能遇到的问题及解决方法

问题1：跨域问题

问题2：图片未完全加载

问题3：缓存问题

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐