1. 首頁
  2. 問答
  3. 使用JavaScript與一類

使用JavaScript與一類

2012-08-16 28 views
0

對於一個jQuery插件，替換.show（）的圖像工作，我必須設置IMG與類懶到顯示：從CSS無。使用JavaScript與一類

我知道如何使它看起來當我需要使用jQuery它：

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

的問題是，我加載jQuery庫在頁腳和我需要的圖像時的頁面開始出現加載。

我不能將代碼移動到標題，因爲沒有jQuery。

所以我想用javascript來做。

我試過getElementbyID，但是我不能讓它工作。

任何想法？

來源

2012-08-16 webmasters

+1

爲什麼不能重新排列你的'

1

好吧，如果你有你的元素ID屬性，

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

應該只是罰款。

querySelectorAll和getElementsByClassName也可以選擇，如果你願意/能夠忽略舊的瀏覽器。

來源

2012-08-16 01:22:17 marteljn

+0

明白了，ty非常多 – webmasters 2012-08-16 01:28:57

0

試試這個JavaScript。正如你所問，它是獨立於jQuery的。該解決方案won't work in IE8 and less：

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

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

如果您wan't這個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-16 01:23:39

+0

-1？有人可以解釋嗎？ – 2012-08-16 01:26:25

+0

這就是我，抱歉沒有解釋，你沒有提及在非現代瀏覽器中缺少對DOM方法的支持。如果這是一個可行的解決方案，我們不需要像JQuery這樣的框架。 – marteljn 2012-08-16 01:30:27

+0

@marteljn沒有probs。感謝您的解釋。我雖然IE6和支持'getElementsByClassName'，我剛剛發現它的IE9和。 （GRRR IE ....）你是對的不好的建議。讓我解決它。 :) – 2012-08-16 01:32:23

相關問題

 相關問題