jQuery-仅在准备好文档时隐藏可见图像（加载前）

Question

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. I've been trying this:

$(document).ready(function () {
    $('img:visible').each(function() {
        $(this).css('visibility', 'hidden');
        $(this).attr('data-internalid', guid());
    });
});

But while debugging, I noticed that it's not even iterating through the loop. What I'm missing here?

Answer 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 :)

Answer 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; } 

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

Answer 3

检查返回$(this) ，并使用控制台日志。