Question

我想根据图像宽度和高度仅加载HTML DOM中的某些图像。

我不知道如何使用JavaScript访问图像的宽度和高度属性。

这必须在任何浏览器下运行。

我的应用是一个书签，所以当用户启动书签时，所有图片都会被加载。所以，我只扫描DOM，获取所有img srv值，并使用它们。诀窍在于我不想要所有图像，只需要符合我想要尺寸的图像。

到目前为止我有这个代码，它从DOM获取所有图像：

var imgObj = document.getElementsByTagName('img');

for(var i=0;i<imgObj.length;i++)
{
imgsList[i] = imgObj[i].getAttribute('src');
if(consoleLog)console.log(imgsList[i]);
}

return images = imgObj.length;

我的问题已经解决了：How to get image size (height & width) using JavaScript?

但我不知道如何使我的代码适应img.clientWidth

是imgsList [i] .clientWidth？

Answer 1

imgObj[i].clientWidth，imgList包含仅src属性的列表。

在使用任何宽度和高度的图像时要小心，因为它们异步加载到浏览器中。这意味着当DOM加载宽度和高度将为0.只有在图像本身完成加载后，元素才会适当地设置宽度和高度。

要解决此问题，您可以使用加载处理程序，一旦图像加载完成后将执行回调。

虽然稍微奇怪的行为是缓存图像的浏览器不会再次调用此加载函数（至少不是jQuery中的函数），因此您需要确保缓存版本在DOM中进行任何宽度检查加载回调。

你可以在标准的javascript中做到这一点，但作为一个例子，因为我前面有一个jQuery示例，我之前正在研究如何在jQuery中完成它。

假设图片有id=imageid

function checkWidths() {
    //do anything you want here

    //jQuery uses the .width and .height functions to get the appropriate attributes of an element, these return a value without the px % etc.  To get the actual css use .css('width') instead.
}

$(document).ready(function() {
    if($('#imageid').width() > 0)
        checkWidths();
});

$('#imageid').load(function() {
    checkWidths();
}

Answer 2

要了解图像的尺寸，您需要：

加载图像（如果脚本在onload回调中执行，则clientWidth为OK）
将它们指定为属性（<img src=... width=33>）。在这种情况下，请使用imgObj[i].getAttribute('width');

请注意，如果要重新加载图像并避免所有缓存问题，最简单的方法是更改其URL，例如：

var srcbase = imgObj.getAttribute('src').split('?')[0];
imgObj.src = srcbase + '?time='+(new Date()).getTime();

（假设图像由路径定义，直到'？'）

Answer 3

这就是家伙，它的工作非常完美。

populateImgsList : function()
    {

    var imgObj = document.getElementsByTagName('img');

    var j = 0;

    for(var i=0;i<imgObj.length;i++)
    {

    if(consoleLog)console.log('w '+imgObj[i].clientWidth+' h: '+imgObj[i].clientHeight);

    if( (imgObj[i].clientWidth>100) && (imgObj[i].clientHeight>100) )
    {

    imgsList[j] = imgObj[i].getAttribute('src');
    if(consoleLog)console.log(imgsList[j]);

    j++;

    }

    }

    return images = imgList;

    },

如何使用Javascript获取图像的宽度和高度？

3 个答案: