微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

chrome下jq width()方法取值为0的解决方法_jquery

php中文网
发布： 2016-05-16 16:46:59
原创
1497人浏览过

http://photo.163.com/shixiaojian089/train/28002 这是网易的一个相册，看到后想试着做做看。

在我的制作方法中，需要获取到每张照片的宽度，所以很自然就使用了jq的width()方法。在ff跟ie下运行问题不大，但是到了chrome上，就出现问题了。

使用alert排查，发现chrome下width方法取到的值都是0.这样子的话，想来就是脚本运行到这的时候图片根本没加载好。问题应该出在$(function(){});上，因为这个方法只要求加载完dom就开始运行。那么改成在onload下执行，果然这下可以了。不过这明显不是很好的办法，毕竟在onload下运行要等到整个文件全部内容全部加载好后再运行脚本。

网上搜索一下后，发现这哥么http://www.jb51.net/article/50402.htm也遇到了同样的问题，在其的评论下方有一种解决方案，可以参考：

在要获取图片宽高的地方用

Zapier Agents
Zapier Agents

Zapier推出的Agents智能体，集成7000+应用程序

Zapier Agents 70
查看详情 Zapier Agents
复制代码 代码如下:

$img.load(function(){
var img_h = $img.height();
var img_w = $img.width();
}

这样可以仍旧使用$(function(){});在需要图片加载的地方对图片对象调用load方法，避免等待整个文件内容加载完毕。

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：chrome下img加载对height()的影响示例探讨_javascript技巧 下一篇：单元选择合并变色示例代码_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Puppeteer高效提取页面多元素文本：解决爬取空白与效率问题 本教程旨在解决使用Puppeteer从网页中提取多个元素文本时遇到的常见问题，特别是登录后页面跳转未等待以及多元素循环提取效率低下导致的结果空白。文章将深入讲解如何通过page.waitForNavigation()确保页面加载完成，并推荐使用page.$$eval()方法在浏览器上下文中高效批量提取元素文本，从而提升爬取脚本的稳定性和性能。
2025-11-22 23:49:26
639
解决EJS模板中Mapbox数据传递的TypeError问题 本文旨在解决在EJS模板中集成Mapbox时，因数据传递不当导致的TypeError:Cannotreadpropertiesofundefined(reading‘coordinates’)错误。核心问题在于将JSON字符串化的对象再次用引号包裹，使其在客户端JavaScript中无法被正确解析为对象。通过移除EJS模板中JSON.stringify输出外部的额外引号，可确保数据作为有效的JavaScript对象字面量被直接赋值，从而使Mapbox能够正确访问地理坐标信息。
2025-11-22 23:06:25
573
JavaScript大数据_分布式计算处理 JavaScript可用于分布式计算，通过Node.js的流式处理、分片与worker_threads实现本地并行，结合主从架构与消息队列构建轻量级分布式系统，并集成Spark、Flink等生态完成大数据任务，适用于实时处理与前后端一体化场景。
2025-11-22 22:57:12
583
JavaScript渲染性能_重绘与回流优化策略 重绘与回流是JavaScript影响页面渲染性能的关键机制，回流因布局变化需重新计算几何属性，开销大且必引发重绘。频繁操作如修改尺寸、读取offset等会触发回流，优化策略包括：批量修改DOM、用CSS类替代内联样式、缓存布局信息、使用transform实现动画、合理启用硬件加速，并通过读写分离和requestAnimationFrame减少布局抖动，从而提升渲染效率。
2025-11-22 22:55:09
227
Go Web应用中实现HTML下拉列表数据通过AJAX提交至后端服务器 本文详细介绍了如何在GoWeb应用程序中，通过前端HTML下拉列表选择数据，并利用JavaScript的AJAX（XMLHttpRequest）技术将其异步发送至后端服务器。教程涵盖了前端事件监听、AJAX请求的构建与发送，以及后端Go服务器接收和处理POST请求的关键步骤，旨在帮助开发者实现高效的前后端数据交互。
2025-11-22 22:52:02
287
JavaScript符号类型_Symbol唯一标识符 Symbol是JavaScript中的原始数据类型，具有唯一性，即使描述相同也不相等；可用于对象属性键以避免命名冲突，不会被常规遍历方法读取，支持全局注册表共享及自定义对象行为。
2025-11-22 22:49:34
346
JavaScript测试驱动_Jest单元测试框架详解 Jest因零配置、内置断言、Mock支持、快照测试和并行执行等特性成为JavaScript测试首选，安装后通过npmtest即可运行测试，其核心功能包括test/describe组织用例、expect匹配器断言、异步测试、模块Mock及快照比对，并支持生命周期钩子管理测试状态。
2025-11-22 22:49:14
579
解决EJS模板中Mapbox无法运行的JSON数据传递问题 本文旨在解决在EJS模板中集成Mapbox时，因JSON数据传递不当导致的“Cannotreadpropertiesofundefined”错误。核心问题在于将JSON字符串错误地作为JavaScript字符串字面量嵌入，而非直接作为可解析的JavaScript对象。通过采用EJS的非转义输出标签，可以直接将JSON字符串注入为有效的JavaScript对象，从而使Mapbox能够正确访问数据并初始化地图。
2025-11-22 22:49:02
733
函数组合：compose与pipe实现方法 函数组合通过compose（从右到左）和pipe（从左到右）实现，分别使用reduceRight和reduce串联函数，提升代码抽象与可读性。
2025-11-22 22:48:06
951
JavaScript符号类型_Symbol内置属性详解 Symbol是JavaScript的原始类型，用作唯一属性键并提供内置符号控制内部行为。①Symbol.iterator定义对象遍历逻辑，使自定义对象可被for...of遍历；②Symbol.toStringTag修改Object.prototype.toString返回值，定制对象标签；③Symbol.hasInstance自定义instanceof判断规则；④其他如Symbol.species控制派生对象构造器，Symbol.toPrimitive指定对象转原始值逻辑，Symbol.unsc
2025-11-22 22:48:06
357
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部