Question

For a jquery plugin to work I have to set the img with the class lazy to display: none from CSS.

I know how to make it appear when I need it using jquery:

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

The problem is that I am loading the jquery library in the footer and I need the image to appear when the page starts to load.

I cannot move the code to the header cause there is no jquery.

So I am thinking of doing it with javascript.

I have tried getElementbyID but I can’t make it work.

Any ideas?

Answer 1

You can use following to display all images with class name lazy using querySelectorAll

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

DEMO.

For single element you can use querySelector

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

DEMO.

Browser compatibility for querySelector/querySelectorAll.

Alternative (runs in every browser)

​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';
    }
}

DEMO.