9

デフォルトの動作に従って、alt属性は画像レンダリングの直前に最初にレンダリングされます。25枚の画像をグリッドに表示しているので、すべてのalt属性が最初に表示されるため、少しぎこちなく見えます。

altFirefoxで属性を非表示にすることは可能ですか？

注： alt私の場合、属性には動的な名前が含まれています。

4

9 に答える 9

19

ここで他のすべての方法を試した後、画像が読み込まれるまでテキストを透明にするこの方法が最適であることがわかりました。

.yourClass img {
    color: transparent;
}
于 2014-01-21T23:04:05.860 に答える
13

alt属性値が表示されないようにする方法は、属性を削除することです。

属性 (タグではない)の意味はalt、画像が表示されない状況で、画像の代わりとなる代替物を指定することです。したがって、画像がまだロードされていないときに非表示にしたい場合は、属性の意味そのものと矛盾する動作を求めています。

ただし、次のようaltに設定することで、Firefox でテキストを非表示にすることができます (通常の CSS 警告を使用)。

img { background: white; color: white; }

CSSで。これaltは、ブラウザが画像を取得しない場合、またはブラウザが画像を表示しないように構成されている場合にも、テキストが表示されないことを意味します。

于 2012-10-01T06:27:43.240 に答える
1

次の設定に加えて、

img { 
  background: white; 
  color: white;
}

Firefox のデフォルトの画像動作も無効にしたい:

img:-moz-loading {
  visibility: hidden;
}
于 2015-01-21T05:36:32.427 に答える
1

古い質問ですが、2020 年現在、 はimg:-moz-loading {visibility: hidden;}機能しなくなりました。

を行う代わりにimg {background: white; color: white;}、これを行う方がはるかに理にかなっていると思います:

img {
   color: transparent;
}

そうすれば、ある程度の透明度があるはずの画像が台無しになることはありません。また、img の背景色を設定する必要があるまれなケースには影響しません。

ボーナスポイントについては、これを行うことができます：

<img src="src.com/src" onerror="this.style.color='black'"/>

これにより、ブラウザが画像の取得に失敗した場合に、通常の代替色に戻ります。

もちろん、これをすべての画像に追加するのは面倒ですが、グローバル<Image/>コンポーネントで JS フレームワークを使用している場合は簡単です。

于 2020-04-28T06:21:44.287 に答える
0

少し追加しても構わない場合は、次のとおりです。

<img src = "283414_2114217089554_728204_nn.jpg" onload="this.setAttribute('alt','this is the alt of my image');" />

それが役立つことを願っています... :))

于 2012-10-01T05:51:28.933 に答える
0

alt 関数について心配するのではなく、すべての画像に共通のクラスを与えることができます。たとえばimage-to-show、この画像の上に絶対配置された読み込み div を作成します。したがって、ページが読み込まれると、読み込み中の div のみが表示され、次のような読み込み中の gif が表示されます。

// show loading image
$('.loader').show();

画像が読み込まれたら、div を非表示にして画像を表示できます。

// main image loaded ?
$('.image-to-show').load(function(){
  // hide/remove the loading image
  $('.loader').hide();
});

特定のイメージ ID を使用して、このコードをさらに拡張できます。それを行うもう1つのよりクリーンな方法は、data-loadingロード中の画像に対してtrueに設定し、画像がロードされたら設定することです$('.image-to-show').data('loading', false)

これに取り組むには複数の方法があります。さらに明確にする必要がある場合はお知らせください。

于 2012-10-01T05:53:20.860 に答える
0

title属性に動的な名前を配置できますか? 黒の背景または黒の背景画像を試すことができます。おそらく、Firefox はまだ黒のテキスト カラーを使用しています。多分img { color: white; }そうするでしょうか？

于 2012-10-01T05:37:20.917 に答える
-1

この CSS を追加することから始めます。これにより、すべての画像が alt テキストで非表示になります (display: noneこれを元に戻したいが、何を元に戻すかわからないからではありません)。

img[alt] {
    width: 0;
    height: 0;
}

そして、すべてロードされたらそれを表示します (これは jQuery を使用します):

$(document).ready(function() {
    $('img[alt]').on('load', function() {
        this.style.width = 'auto';
        this.style.height = 'auto';
    });
});
于 2012-10-01T06:19:30.020 に答える