Jquery - Hide Only Visible Images (before Load) On Document Ready

I'm developing a Chrome extension, and require a functionality such that I want to get all visible images as soon as possible (before they load), hide them and set some attribute.

Solution 1:

So, as I mentioned in my comments

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

So, one of your options would be to use

$(window).on('load', function() { ... });

You may also try an alternative, such as the following.

1. Have a class for all the images you'd later like to set attributes to.
2. Set display:none; to that particular class in CSS.
3. On load (look at the first option), set your attributes and then display those images, either by removing the class (recommended) or setting inline styles (not pretty).

Hope that was clear :)

Solution 2:

$(document).ready(function (index) {
    $('img:visible').each(function() {
        $(this).css('visibility', 'hidden');
        $(this).attr('data-internalid', "test"); /*instead of guid().I think that function have some problem.Make sure it is defined or loaded properly*/
    });
});

The problem is with your guid() function.This code works fine on firefox and chrome.Please check the function.If the problem is not solved, then update your jquery if it is offline else please provide guid() function.

$(function(){
  //$("#btn").click(function(){
       $('img:visible').each(function() {
        $(this).css('visibility', 'hidden');
        $(this).attr('data-internalid', "test");
    });
  //  });
  
  });

img{
  width:100px;
  height:100px;
  margin:10px
}
span{
  display:block;
  cursor:pointer;
}

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><imgsrc="http://www.clker.com/cliparts/w/o/d/I/G/A/smily-hi.png"><imgsrc="http://www.clker.com/cliparts/w/o/d/I/G/A/smily-hi.png"><imgsrc="http://www.clker.com/cliparts/w/o/d/I/G/A/smily-hi.png"><spanid="btn">Click me</span>

Solution 3:

Check what returns $(this), use console log for it.