使用 javascript 将图像的 .show(） 替换为类

Use javascript to replace .show() for an image with a class

本文关键字：替换 show javascript 图像 使用      更新时间：2023-09-26

要使jquery插件正常工作，我必须设置img，并且类延迟显示：CSS中没有。

我知道如何使用jquery在需要时使其显示：

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

问题是我正在页脚中加载jquery库，我需要在页面开始加载时显示图像。

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

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

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

有什么想法吗？

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

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

应该工作得很好。

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

您可以使用

以下内容来显示具有类名的所有图像，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';
    }
}

演示。

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

相关文章：