-1

我只想根据图像宽度和高度从 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;

我的问题在这里得到了解决：如何使用 JavaScript 获取图像大小（高度和宽度）？

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

是 imgsList[i].clientWidth 吗？

4

3 回答 3

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();
}
于 2012-07-17T12:18:44.560 回答
1

要知道图像的尺寸，您需要：

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

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

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

（这假设图像由路径定义，直到“？”）

于 2012-07-17T12:20:23.233 回答
0

伙计们，这就是它，它工作得很好。

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;

    },
于 2012-07-17T12:44:11.027 回答