0

jquery プラグインを機能させるには、CSS からlazy to display: noneクラスを使用してimgを設定する必要があります。

jqueryを使用して必要なときに表示する方法を知っています：

$("img.lazy").show();

問題は、フッターに jquery ライブラリをロードしていて、ページのロードが開始されたときに画像を表示する必要があることです。

jqueryがないため、コードをヘッダーに移動できません。

だから私はjavascriptでそれをやろうと考えています。

getElementbyID を試しましたが、うまくいきません。

何か案は？

4

3 に答える 3

1

要素に Id 属性がある場合、

document.getElementById("YourId").style.display = "block"; //or inline

うまくいくはずです。

querySelectorAllまた、getElementsByClassName古いブラウザを無視する意思がある/無視できる場合のオプションでもあります。

于 2012-08-16T01:22:17.683 に答える
0

lazy次を使用して、クラス名を持つすべての画像を表示できますquerySelectorAll

var el = document.querySelectorAll("img.lazy");
for(i=0;i<el.length;i++) el[i].style.display='block';

デモ。

単一の要素の場合、使用できますquerySelector

var el = document.querySelector("img.lazy"); // only one/the first img with class name lazy
el.style.display='block';

デモ。

querySelector/querySelectorAll のブラウザー互換性。

代替 (すべてのブラウザーで実行)

​var els=document.getElementsByTagName('img');
if(els)
{
    for(i=0;i<els.length;i++)
    {
        if(els[i].className.match(/lazy/)) els[i].style.display='block';
    }
}

デモ。

于 2012-08-16T01:47:27.297 に答える
0

この JavaScript を試してください。あなたが尋ねたように、それはjQueryに依存しません。このソリューションは IE8 以下では機能しません:

window.onload = function() {
  var images = document.getElementsByClassName('lazy');

  for (var i = 0; i <= images.length - 1; i++) {
    images.style.display = 'block';
  }
};

IE でこれをサポートしたくない場合は、画像に一意の ID を付けて、次のように選択する必要があります。

window.onload = function() {
  document.getElementById('lazy').style.display = 'block';
};

または、フッターにある場合でも、jQuery メソッド<script>(もちろん、jQuery ライブラリをロードした後):

$(document).ready(function() {
  $('img.lazy').show();
});

簡単な注意:ページの下部で jQuery (または任意の JavaScript) をロードしても、ロード時間は短縮されませんが、知覚されるロード時間は短縮されます。Web ブラウザーは、同じ量のコンテンツをロードする必要があります。ページの表示コンテンツの後に、かさばる JS ファイルがロードされるだけです。にタグを含めても問題ありません。

于 2012-08-16T01:23:39.617 に答える