-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 に答える