确定图像未插入 DOM 时的宽度和高度
determine width and height of an image while it isn't inserted to the dom
我正在使用 ajax 调用从服务器接收长字符串中的图像
图像的网址肯定在结果[1]内。我使用了width/naturalWidth和height/naturalHeight,有时它们返回0,在其他情况下,它们返回正确的像素大小
var imgElement = jQuery("<img>").attr("src", result[1]);
var width = imgElement[0].naturalWidth;
var height = imgElement[0].naturalHeight;
if (width >= that.minImgPixels && height >= that.minImgPixels) {
image = result[1];
}
如何在不插入 dom 的情况下检查图像宽度和高度的正确方法?
试试这个:
function GetAnImage(src) {
var newImg = document.createElement('img');
newImg.src = src;
return newImg;
}
var newImg = GetAnImage("abc.jpg");
newImg.onload = function () {
var height = this.height;
var width = this.width;
//do with the image as you want
}
或查看此链接:在将 IMG 添加到 DOM 之前获取其自动大小(使用 JQuery)
出现问题是因为设置jQuery("<img>")
的 src 需要时间,并且当它这样做时,javascript 继续运行到下一行,这些行产生 0,因为图像尚未加载。
解决方案是设置如下加载事件:
var imgElement = jQuery("<img>").load(function(){
var width = imgElement[0].naturalWidth;
var height = imgElement[0].naturalHeight;
if (width >= that.minImgPixels && height >= that.minImgPixels) {
image = result[1];
}
}).attr("src", result[1]);
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- ExtJS——在展开/折叠时调整面板高度
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 分析高度属性时出现意外值{{specs.height}}.index.html
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 以非像素为单位获取HTML DOM元素的CSS高度,在我的例子中是英寸
- 如何在DOM上的javascript操作之后立即获取html元素的高度
- 在复杂 DOM 中动态调整框高度是否不高效
- 确定图像未插入 DOM 时的宽度和高度
- 获取LESS/CSS中DOM元素的高度
- 高度:自动计算错误,如果元素隐藏时dom加载,然后显示
- 如何使一个DOM元素的高度可调整大小?
- 在JS中获取DOM外元素的宽度和高度
- 是否有可能得到一个图像的高度/宽度,而不是在DOM
- 隐藏了溢出的DOM元素及其子元素,DOM可以测量高度/宽度
- 如何在不更改DOM的情况下计算文本选择的高度
- 更改具有宽度和高度的图像的src是否会导致DOM抖动
- Javascript DOM 偏移小屏幕上的高度问题
- 从CSS中获取高度,而不是从DOM中的元素获取高度