javascript - 使用 javascript 将 .show() 替换为具有类的图像

Question

为了使 jquery 插件正常工作，我必须将img设置为惰性显示类：无来自 CSS。

我知道如何在需要时使用 jquery 让它出现：

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

问题是我正在页脚中加载 jquery 库，并且我需要在页面开始加载时出现图像。

我无法将代码移动到标题，因为没有 jquery。

所以我正在考虑用javascript来做。

我已经尝试过 getElementbyID 但我无法使其工作。

有任何想法吗？

Answer 1

好吧，如果你的元素上有一个 Id 属性，

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

应该工作得很好。

querySelectorAllgetElementsByClassName如果您愿意/能够忽略旧版浏览器，也是选项。

Answer 2

试试这个 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文件。我在 .

Answer 3

您可以使用以下方法显示所有具有类名的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';
    }
}

演示。