如何获取隐藏图像的高度?

2023-12-09

当 div 被隐藏时 (display:none)浏览器将不会加载其中的图像。有没有办法告诉浏览器加载图像?我需要图像的高度和宽度来进行一些预处理。

注意:由于一些其他代码,我无法使 div 可见。检查这里的例子。 另外,“延迟加载”示例对我来说不起作用。


我添加了一些预加载,将其包装到一个函数中,这样就达到了目的:

function getImageDimension(el, onReady) {    
    var src = typeof el.attr === 'function' ? el.attr('src') : el.src !== undefined ? el.src : el;

    var image = new Image();
    image.onload = function(){
        if(typeof(onReady) == 'function') {
            onReady({
                width: image.width,
                height: image.height
            });
        }
    };
    image.src = src;
}

可以用作:

getImageDimension($('#img1'), function(d){ alert(d.height); });
var url = 'http://urology.jhu.edu/patrickwalsh/photo1.jpg';
getImageDimension(url, function(d){ alert(d.height); });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何获取隐藏图像的高度? 的相关文章

  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • 返回视图作为 JSON 对象的一部分

    我有一个应用程序只加载一次完整视图 我这样做的原因并不重要 重要的是 其余内容只会以部分视图的形式返回 除了一些内容之外 我还有一些 JSON 对象 我想通过每个 AJAX 请求在服务器之间来回传递 有没有办法返回一个 JSON 对象 并将
  • Angular 4 Http POST 不起作用

    我希望每个人都做得很好 我最近开始使用 Angular 4 4 我一直在尝试将数据发布到我的 api 服务器 但不幸的是它不起作用 我花了大约两天的时间 但仍然没有成功 甚至已经尝试过 6 7 篇文章角 io https angular i
  • Chrome --app 相当于 Firefox\IE

    我有一个网络应用程序 客户要求单击不同按钮时更改浏览器窗口大小 我发现在那link https stackoverflow com questions 13436855 launch google chrome from the comma
  • 播放没有音频标签的音频

    是否可以在没有音频标签的情况下仅使用 javascript 播放音频 我通过 tinyMce 编辑器注入脚本 因为我无权访问网站的后端 并且它不支持客户端的音频标签 她只想要当您将鼠标悬停在图像上时发出简单的声音 我已经完成了所有设置 但是
  • 从链接打开本地文件夹

    如何通过单击任何链接打开本地文件夹视图 我尝试了很多选择 例如 a href Open folder a or a Open folder a or a Open folder a 解决方案 启动可下载链接 以下内容适用于所有浏览器 但一如
  • ES6 模块范围

    我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib
  • 从网页运行 ClickOnce 应用程序,无需用户操作

    我们有一个基于 Java 的 Web 应用程序以及用 C 编写的相同应用程序 如果 java 检查器发现客户端计算机上没有安装 Java 则应该运行该应用程序 这个想法是运行 C 单击一次 http en wikipedia org wik
  • 禁用复选框上的输入

    需要在取消选中该复选框时禁用输入 并在选中该复选框时启用它 我的代码是这样的 div class y div
  • 使用flex-basis控制行上显示的项目数

    我想在使用 Flex 时将元素推出以隐藏它们 例如 如果flex basis为 50 仅显示两个项目弯曲到给定空间 而其他元素则在overflow hidden 领土 Or if flex basis为 25 则仅显示 4 个 Flex 元
  • 为什么这些内联块元素会产生额外的宽度?

    这是这个问题的后续内容 仅使用 css 自动调整图像下的文本 https stackoverflow com questions 34185547 autofit text under image with only css 为什么这段代码
  • onPress 方法中箭头函数与普通函数的行为

    正在学习 Native React 并学习更多关于 javascript 的知识 所以我仍然不明白它的行为的很多事情 我使用 TouchableOpacity 及其 onPress 属性创建了一个按钮组件 为了让它工作 我必须发送我想要执行
  • Graphql 将多个查询合并(组合)为一个?

    我正在尝试使用 JavaScript 将多个 GraphQL 查询合并为一个查询 我正在寻找这样的东西 let query3 mergeQueries query1 query2 我们事先不知道哪些查询将被组合 假设我有这样的查询 输入查询
  • 触发 jQuery UI 滑块事件

    如何触发更改事件jQuery UI 滑块 http docs jquery com UI Slider 我以为会是 slider trigger slidechange 但这没有任何作用 完整的示例脚本如下
  • Vue - 调度完成后调用 store getter?

    我正在使用 Laravel 5 7 Vue2 Vuex 我在调度调用完成后让 Vue 返回存储值时遇到一些困难 我的申请流程如下 我单击一个提交按钮 该按钮调用组件上的 validate Validate 分派到我的 addLease 操作
  • 将网站加载到 DIV 中

    当我在文本框中写入 URL 然后单击提交按钮时 如何实际从网站检索数据 我希望将数据放入我拥有的 div 中 这可能吗 我已经尝试过这个 但它不起作用
  • 为什么 JavaScript 中是 [1,2] + [3,4] = "1,23,4" ?

    我想将一个数组的元素添加到另一个数组中 所以我尝试了以下方法 1 2 3 4 它的回应是 1 23 4 到底是怎么回事 The 操作员没有为数组定义 发生的事情是 JavaScript将数组转换为字符串并将它们连接起来 Update 由于这
  • 如何从 html 字符串向 jQuery DataTable 添加多行

    我有一个 jQuery DataTable 我想向其中添加 html tr 行 这些行以 html 字符串的形式出现 我可以使用标准 jQuery 将它们添加到表中 但这意味着它们绕过 DataTable 对象 并在重新排序表时丢失 要使用
  • JavaScript 阶乘防止无穷大

    我一直在 JavaScript 中使用这个函数来计算阶乘数 var f function factorial n if n 0 n 1 return 1 if f n gt 0 return f n return f n factorial

随机推荐

  • 熊猫数据框来字典,同时保留重复的行

    我有一个如下所示的数据框 kenteken status code 0 XYZ A 123 1 XYZ B 456 2 ABC C 789 我想将它转换为字典中的字典 如下所示 XYZ code 123 status A code 456
  • JavaScript 最终方法

    javascript中的方法可以是final的吗 如何避免它被子类覆盖 从传统意义上讲 不 您不能拥有私有 受保护的方法或阻止它们被覆盖 然而 您可以做的是将方法封装在一个范围内 然后简单地不公开它们 function foo functi
  • 没有布局模板或 JSON 视图的 Meteor Iron-Router

    使用 Meteor Iron Router 我怎样才能either将数据呈现为 JSON 或只是将其显示为 原始 没有布局模板 本质上我希望能够做类似的事情 this route rawdata path raw collection la
  • Microsoft Face API 中“解码错误,图像格式不受支持”

    我正在尝试使用 Microsoft Face API 为此 我有 Microsoft 提供的以下代码作为示例 在本页末尾 https dev projectoxford ai docs services 563879b61984550e40
  • 如何使用preg_match提取数据?

    我对 preg match 的使用还很陌生 在发布这个问题之前搜索了很多答案 找到了很多帖子来根据 youtube ID 等获取数据 但没有任何符合我的需要 如果这是一个愚蠢的问题 请原谅我 我需要使用 preg match 从字符串中获取
  • 如何从 QLineEdit() 获取 int?

    所以这是我的代码 我尝试了很多方法来更改 QLineEdit 的输入 但没有任何效果 我唯一得到的是 类型错误 QLineEdit 和 QLineEdit 实例之间不支持 gt from matplotlib import pyplot i
  • 对 MYSQL 标签表进行排序

    只是想知道是否可以获得前 10 COUNT 个结果并按 COUNT 和字母顺序排序 我有以下表格 tags id title tagged tag id post id 以及以下 SQL 查询 SELECT tag COUNT td tag
  • Android 媒体播放器和搜索栏同步问题

    我正在开发一个媒体播放器应用程序 我正在尝试将其同步到搜索栏 以便在播放媒体时搜索栏自动前进 这是我的源代码 public class MusicDroid extends ListActivity implements SeekBar O
  • 使用 powershell 登录 azure 帐户而不弹出窗口

    我正在尝试使用 powershell 创建 Azure VM 我还有创建它的脚本 首先我需要登录 Azure 帐户 Login AzureRMAccount 这会弹出一个窗口来输入凭据 其次我需要运行以下脚本 UserName userna
  • 电子邮件发送后电子邮件地址发生变化(GMail postfix 中继)[关闭]

    Closed 这个问题是无关 目前不接受答案 我已经达到了 SMTP postfix 知识的极限 我正在使用 javamail 1 4 发送邮件 javamail 库正在连接到本地 postfix 进程 postfix 进程配置为通过 gm
  • iOS 应用程序在模拟器上运行但在设备上运行?

    我的应用程序没有错误 警告或内存泄漏 在模拟器上运行完美 但在运行 iOS 5 的 iPhone 4 上出现黑屏 SIGABRT发生在这一行的 main 中 int retVal UIApplicationMain argc argv ni
  • 使用 中的 regex_replace 函数时出错

    include
  • 如何从属性文件初始化 ORB?

    我想从属性文件初始化我的 ORB 通常我在运行示例时像这样初始化它 app ORBInitRef NameService corbaloc localhost 2809 NameService 我写了一个简单的代码 private stat
  • 使用Gson或嵌套内部类反序列化内部类中的任意对象json数组

    当我尝试使用 Gson 反序列化一个 Json 字符串时 我遇到了麻烦 字符串是这样的 注意 我只是简化了它 但留下了我遇到麻烦的部分 因此 可能存在 Json 语法错误 但我已经使用在线验证器检查了我正在使用的字符串是否正常 let s
  • 合并两个带有替代字符的字符串作为输出

    我的任务是交替组合两个长度相同的字符串的字母 例如 Inputstring 1 acegi Inputstring 2 bdfhj Outputstring abcdefghij 当我运行我的代码时 我遇到了以下问题 Traceback m
  • 我可以将标准输出重定向到某种字符串缓冲区吗?

    我正在使用 python 的ftplib编写一个小型FTP客户端 但包中的某些函数不返回字符串输出 而是打印到stdout 我想重定向stdout到一个我能够读取输出的对象 I know stdout可以使用以下命令重定向到任何常规文件 s
  • 使用与先前轴相同的参数添加轴

    我想在两个不同的子图中绘制数据 绘图后 我想返回第一个子图并在其中绘制附加数据集 但是 当我这样做时 我收到以下警告 MatplotlibDeprecationWarning 使用与先前轴相同的参数添加轴当前会重用先前的实例 在未来的版本中
  • 回文检查的递归方法

    是否可以使用以下参数列表定义回文检查的递归方法 int testPalindromeRecursive char str int len 注意 不必使用外部子函数或全局变量 我认为这是不可能的 因为你必须以某种方式记住最后一个 前面 索引位
  • 键“数据源”的值长度超出了“128”的限制

    我知道有人问过一个非常相似的问题here 但答案对我没有帮助 我将 Entity Framework 6 与 Oracle ManagerDataAccess Client 结合使用 如果我在 app config 中定义连接字符串 则连接
  • 如何获取隐藏图像的高度?

    当 div 被隐藏时 display none 浏览器将不会加载其中的图像 有没有办法告诉浏览器加载图像 我需要图像的高度和宽度来进行一些预处理 注意 由于一些其他代码 我无法使 div 可见 检查这里的例子 另外 延迟加载 示例对我来说不