jquery 获取图片宽高为0的问题

最新推荐文章于 2019-09-09 16:34:32 发布

转载最新推荐文章于 2019-09-09 16:34:32 发布 · 570 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/candy-Yao/p/8615760.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用jQuery实现的页面图片加载完成后的处理方法。通过监听img元素的load事件，可以在图片加载完毕后获取其宽度等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：页面加载完了，图片不一定加载完了。

$(function(){
    $("img").on("load",function(){ //核心
        var w = $(this).width();
        alert(w);
    });
});

转载于:https://www.cnblogs.com/candy-Yao/p/8615760.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33712881

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

springBoot图片上传对图片高进行百分比剪切

weixin_41327271的博客

07-22

691

百分比截取图片高度，在网上找了不少解决方案，也没找到可以直接使用的，最后不断的尝试寻找整合得出一下结果，不知道是我搜索的原因还是这个场景不常见，没找到完全适配的解决方案，经过不断的尝试得以解决，就想着写这篇博文，希望能帮助到大家。.........

jQuery标签导航控制图片全屏切换代码

10-24

3. **全屏切换效果**：为了实现全屏切换，我们可以利用CSS来设定图片的宽高为100%，确保图片充满整个屏幕。同时，使用jQuery的动画功能（如`.fadeIn()`和`.fadeOut()`）可以创建平滑的过渡效果，提升用户体验。 4. ...

参与评论您还未登录，请先登录后发表或查看评论

jquery使用height()返回元素高度总是为0

weixin_34050519的博客

05-09

951

为什么80%的码农都做不了架构师？>>> ...

JS:关于JQ获取图片高度为0的问题记录

MRblackLu的博客

04-08

4599

好久没有写PC的页面，今天写了一把，然后被一个小问题纠结了好久：JQ获取图片高度为0。不多说，上代码：<style> #box > img { margin-bottom: 20px; width: 100%; } </style><div id="box"> <img src="xxx" /> <img src="xxx" />

做图片瀑布流时，遇到获取图片的宽为0的问题

m0_37820751的博客

09-09

257

原因：图片的加载并不像div这类元素是已经加载完成后才调用的，图片是在页面加载后一直在加载，没有加载完成，当然是取不到值。应判断图片加载是否完成，用load事件。 jquery下用 $('img').load(function(){ }) 原生js下用 img.onload() = function(){ } 附带图片瀑布流 https://download.csdn.n...

jquery 获取上传图片的大小

zhangxiaoyang0的专栏

12-15

1263

有时候我们想在页面获取上传图片的大小，很简单：var size=$("#upload")[0].files[0].size; #upload 是input 的 id。之前在网上查过这个需求，没找到结果，问了前端的同学，也说应该做不到。所以就自己亲自调试了 js 代码，看到了files 属性：属性内容：很明显是可以获取到图片大小的。

jq获取动态生成的img宽高为0问题解决

HuangsTing的博客

08-15

2025

主要原因是因为图片是在DOM结构渲染完成以后调用的，这时候网页中一些资源还没有加载，比如图片等资源，但是DOM结构已经渲染成功了因为项目中经常用的是jquery，所以，解决图片高度的时候就要在window.οnlοad=function(){}里调用，当然若是需在$(function(){})里的调用img的高度，那么就需要这样来写： $("#img").get(0).onload = func...

jQuery实现自适应宽度全屏的焦点图效果源码.zip

11-19

2. **CSS布局**：为了实现全屏效果，我们可以设置父容器（焦点图容器）的宽高为视口的宽度和高度，即`width: 100%; height: 100vh;`。这样，无论窗口大小如何变化，焦点图都会充满整个屏幕。同时，确保子元素的宽度...

html实用(匹配手机和背景图片等),使用bootstrap3实现

01-08

例如，使用网易云音乐的外链，通过设置宽高为0隐藏播放器，但要注意播放行为可能受官方策略影响。 8. **Bootstrap3响应式布局**：Bootstrap3提供`.col-md-`, `.col-lg-`等类，根据屏幕宽度调整元素的列数。例如，`....

js图片iframe内页父页展示全屏

12-04

这段代码首先通过`getElementById`获取`iframe`元素，然后通过`contentWindow`属性访问到`iframe`内部的页面，再用`querySelector`找到图片元素，并设置其宽高为父窗口的宽高。为了实现动态响应，我们需要监听窗口...

javascript使用image.height和image.width获取图片宽高值为0，获取失败的原因

超级赛亚人

12-05

6562

javascript使用image.height和image.width获取图片宽高值为0，获取失败的原因

jQuery获取width为0，获取隐藏元素实际宽度

快乐每一天

01-21

2158

$("#pageLoadingInnerDiv").css("display", "block"); var iconMarginLeft = (926-jQuery("#pageLoadingTipMsg").width())/2; jQuery("#pageLoadingInnerDiv > div:first").css("margin-left",

new Image 读取宽高为0

yezi_Z的博客

06-19

4382

获取图片一张图片的大小 let img = new Image() img.src = imgUrl if ( img.width != 375 || img.height != 200 ) { message.error(‘请上传375*200大小的图片’) return false } 发现有时img的宽高读取都为0，但是图片url地址是正确的。这边存在一个问题，当给img赋值sr...

jquery获取图片的宽度

王凯凯凯凯的前端之路

04-22

879

在ready之后直接获取图片的宽度很容易因为还没有加载完成，所以宽度值一直会是0，使用load方法就能避免这种尴尬：代码如下 jQuery(function(){ jQuery(window).load(function(){ /*对图片进行操作*/ }); });

js获取svg中g元素的宽高

qq_41756580的博客

04-22

3735

这里有一个g元素： <g id="g_main" transform="translate(120,2804.5)"> <rect></rect> <rect></rect> <rect></rect> <rect></rect> ... <...

datav渲染出来宽高为0

最新发布

01-04

### Datav 组件渲染后宽度和高度为 0 的解决方案对于Datav组件在渲染过程中出现宽高为 0 的情况，通常是因为父容器未能正确传递尺寸给子组件。一种常见且有效的解决办法是利用 `window.getComputedStyle` 方法来获取父级 div 实际的宽高并将其应用到目标组件上[^3]。下面是一个具体的实现方式： #### 使用 JavaScript 动态设置样式可以创建一个函数，在页面加载完成以及窗口大小改变时调用此函数更新组件的高度和宽度: ```javascript function updateComponentSize(componentId) { const component = document.getElementById(componentId); if (!component) return; // 获取父元素的实际尺寸 let parentStyle = window.getComputedStyle(component.parentElement, null); // 设置组件的具体宽高 component.style.width = `${parentStyle.getPropertyValue('width')}`; component.style.height = `${parentStyle.getPropertyValue('height')}`; } // 页面加载完成后执行一次初始化调整 window.addEventListener('load', () => {updateComponentSize('your-component-id');}); // 当浏览器窗口大小发生变化时也重新计算组件尺寸 window.addEventListener('resize', () => {updateComponentSize('your-component-id');}); ``` 此外，如果是在 Vue.js 环境下工作，则可以在 mounted 生命周期钩子内处理这个问题，并确保数据已经成功从接口拉取完毕再进行 DOM 操作[^1]: ```vue <template> <div id="container">  </div> </template> <script> export default { name: 'YourComponentName', mounted() { this.$nextTick(() => { // 数据准备就绪后再尝试更新组件大小 updateComponentSize(this.$el.id); }); }, methods:{ ..., } }; </script> ``` 通过上述方法能够有效防止由于父节点未定义固定尺寸而导致 datav 子组件无法正常显示的问题。