开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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后添加一个随机参数或时间戳，以避免缓存问题。

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

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

有帮助

没帮助

相关·内容

JS 获取浏览器默认字体大小

说是 JS，其实也还是要配合 CSS 使用。要获取浏览器默认字体大小，我们可以使用 CSS 的 font-size 属性。...将元素的字体大小设置为 medium 可以将其设为浏览器默认大小，通常为16 px。...以下是设置元素字体大小的 CSS 代码示例： .element { font-size: medium; } 一旦将元素字体大小设置为浏览器默认大小，就可以通过 JavaScript 来获取其实际值...然后，使用 getComputedStyle() 方法获取该元素的计算样式，即应用于该元素的实际样式。最后，使用 parseInt() 方法将获取到的字体大小值转换为整数。...需要注意的是，如果浏览器默认字体大小被修改，例如在 Chromium 浏览器中将其更改为"特大"，则返回值将相应地更改。

3.3K3 0

获取来源IP地址的正确姿势

每次和客户对接，我都花很长的时间跟对方的技术人员解释如何正确地获取来源IP地址，但是每家公司的情况都有所差别，没有一个标准方法。...这些IP是动态变化的，据老高说，只有分析BGP数据的时候，才能看到哪些IP是没有被启用的。业务系统获取来源IP的正确姿势下面是一个简单的示意图，简单地把整个访问链路划分成可信区域和不可信区域。...可信区域，就是平台自己，或者友商建立的系统，可以保证从这些系统中获取并传递的数据是真实的、可信的。获取来源IP的正确方式，是提取并记录本次请求首次进入可信区域时的remote address。...此外，某些CDN服务商，会有自己定制化的Header字段，情况比较多，建议结合具体的情况来决定如何获取用户的来源IP。...那么其实只要获取XFF中倒数第三个IP，作为来源IP即可。一种参考方式如下：在反向代理(Nginx)上配置，增加Real-IP字段： ? 业务系统中，获取来源IP的代码如下(Java示例)： ?

4.1K7 0

js获取屏幕大小，当前网页和浏览器窗口

jQuery 如果您使用的是jQuery，则可以使用jQuery方法获取窗口或document的大小： $(window).height(); // returns height of browser...viewport $(document).width(); // returns width of HTML document (same as pageWidth in screenshot) 屏幕大小...对于屏幕大小你可以使用以下代码实现： screen.height; screen.width; 1.获取屏幕尺寸获取屏幕宽度：window.screen.width; //整个屏幕的宽度获取屏幕高度...; //client不包括边框获取网页内body的高度：document.body.clientHeight; 4.获取网页的宽高获取整个网页的宽度：document.body.scrollWidth...获取整个网页的高度：document.body.scrollHeight 5.获取body的宽高（含边框）获取网页内body的宽度:document.body.offsetWidth //

12.4K2 0

js中，如何获取批量传入文件的大小，名称，进行循环展示。

Math.floor(Math.random() * (m - n + 1) + n) return num }, /// 通过 change 时间获取文件...this.list.push(obj.files[i]) } }, dropClick: function (e) { /// 拖拽情况获取文件

10K2 0

js获取屏幕大小，当前网页和浏览器窗口

jQuery 如果您使用的是jQuery，则可以使用jQuery方法获取窗口或document的大小： /** * 时间：2019年8月18日 * 前端教程： https://www.pipipi.net...viewport $(document).width(); // returns width of HTML document (same as pageWidth in screenshot) 屏幕大小...对于屏幕大小你可以使用以下代码实现： /** * 时间：2019年8月18日 * 前端教程： https://www.pipipi.net/ */ screen.height; screen.width

5.9K4 0

Python-获取图片的大小

了解过Pillow的都知道，Pillow是一个非常强大的图片处理器，这篇文章主要记录一下Pillow对图片信息的获取：安装Pillow pip install pillow 本地图片 import os

1.4K2 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大小...，并且，其数值会随窗口大小的改变而变化。...（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

8.1K3 0

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body...document.body.clientHeight)) winHeight = document.body.clientHeight; // 通过深入 Document 内部对 body 进行检测，获取窗口大小...winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } 详细: 关于获取各种浏览器可见窗口大小...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。

7.5K2 0

Python获取图片的大小尺寸

1、pil获取： (1)、安装扩展 pip install...Users/admin/Pictures/scence/1.jpg' img = Image.open(file_path) imgSize = img.size #大小.../尺寸 w = img.width #图片的宽 h = img.height #图片的高 f = img.format ... print(w, h, f) 打印： (534, 300) 534 300 JPEG 2、opencv获取

16.3K1 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转）

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度... offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...&& (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大小...，并且，其数值会随窗口大小的改变而变化。...（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

16.2K1 0

获取当前base64的大小

const getImgSize = str => { var strLength = str.url.length; var fileLength =...

1.3K2 0

PG获取文件大小的方式

1、通过元命令获取表文件大小通过\dt+可以得到该表大小。该元命令会转换成SQL语句去执行，实际上是通过pg_table_size函数进行获取。...该函数调用calulate_table_size(rel)其中rel为表的描述结构Relation。通过这个方式计算表大小包括fsm、vm文件大小，如果有toast索引，还包括toast表大小。...那么具体获取文件大小的方式是什么呢？看calculate_relation_size函数：最终通过stat函数来获取，这个得到的是文件大小，而不是占用磁盘大小。...2、内部计算表有多少页通过RelationGetNumberOfBlocks只计算表主文件的多少页，调用函数RelationGetNumberOfBlocksInFork进行计算。...= RelationGetNumberOfBlocks(rel);//真实多少页 //pg_class中统计的多少页和多少记录 relpages = (BlockNumber) rel->rd_rel

1.7K1 0

python获取远程图片的大小和尺寸

这段代码通过urllib2打开远程图片，通过cStringIO读取文件内容，不用保存到磁盘即可读取图片文件的信息 #!

1.2K2 0

获取Oracle数据库段的大小

commandresult为执行完Oracle命令显示结果的页面 ---- views.py 下面为commandresult对应的函数在views.py里面的写法 ?...首先获取到表单中的数据，如 ipaddress,tnsname以及执行的命令 2. 然后通过ipaddress,tnsname从oraclelist数据库中查找获得用户名密码用于连接 3....再判断命令内容，如果是check_segments_size则执行函数getsegmentssize 这里的getsegmentssize函数获取Oracle大小大于1G的段并按大小降序排列，详情看具体代码...函数来获取Oracle大小大于1G的段并按大小降序排列,具体看SQL语句 monitor/command/getoraclecommandresult.py def getsegmentssize(cursor...---- 源码地址源码请查看我的GitHub主页 https://github.com/bsbforever/wechat_monitor ---- 下期将介绍如何如何通过操作系统的进程号获取对应的SQL

9012 0

Imageloader-获取图片需要显示的大小

说一下通过线程加载图片的过程: 首先根据ImageView获得适当的压缩的宽和高然后计算inSampleSize，用于压缩图片接着将图片添加到缓存最后mUIHandler发送消息更新图片。...第一步根据ImageView获得适当的压缩的宽和高因为要获取到压缩的宽和高，方法只能返回一个值，所以我们可以采用内部类的方式将宽和高设置为变量，返回此类的对象即可。.../** * 压缩的宽和高 */ private class ImageSize{ int width ; int height; }...计算压缩的宽和高的方法 /** * 根据imageView获取适当的压缩的宽和高 * @param imageView */ private ImageSize...imageSize.height = height; return imageSize; } /** * 为了兼容低版本，没有采用@Target()的方式

7073 0

获取文件的大小(fseek和ftell函数)

参考链接： C++ ftell() //头文件 #include #include #include //定义获取文件大小的函数 int...fp) { //如果打开失败则返回fopen的错误内容 perror("fopen error"); //结束函数 return...-1; } //fseek函数 fp指针到文件末尾，向前偏移0个字节 fseek(fp, 0, SEEK_END); //ftell返回文件的大小 int ret...= ftell(fp); //打印文件的大小 printf("文件大小为：%d字节\n", ret); } //主函数 int main() { //调用获取文件大小的函数

1.2K0 0

python获取远程图片的大小和尺寸

这段代码通过urllib2打开远程图片，通过cStringIO读取文件内容，不用保存到磁盘即可读取图片文件的信息 #!

1K3 0

C语言获取当前输出窗口的大小

很多同学在学习C语言,只是局限于课本知识的学习及应用，课本上的练习题做了不少，可一旦遇到实际应用中的问题，就感到无从下手。以下就简单的就printf函数进行分析。 ...; } 以上函数是众多教科书上的经典实例,这一点地球人都知道！ ...C程序的输出结果是在标准的输出设备上，通常情况下，在Win环境下，其输出在一个字符窗口上，现在试问，如何得到该字符输出窗口的大小，也即该窗口容纳多少字符，？行 * ？列。 ...显然，如果我们将要输出的字符加长，则计量在满一行中所显示的字符，则很容易测出一行所占用的字符数。...main() { printf("\n"); for ( int i=1;i<=10;i++) printf("0123456789"); } 同理，按此方法我们可以得到窗口所容纳的字符行数

3.3K0 0

js获取本月的天数

前天写计时小程序时候想要获得本月的所有天数遇到了梗! 正常的想法肯定头皮发麻! ?...那么还有什么可以简单获取到制定月份的天数吗?当然有呀! 接下来看一下骚操作!...let days=new Date(2018,7,0).getDate() 一行代码简单搞定获取制定月份的天数,什么原因呢! ?...,原来js中x年x月0号进行获取getDate()时候会返回本月最后一天是几号,这样我们就得到我们所需的数据了,最后一天几号就是多少题啦!...原文地址《js获取本月的天数》

23.7K3 0

VB获取文件大小的方法代码分享

本文实例讲述了VB获取文件大小的方法。分享给大家供大家参考。

1.4K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭