how to check image is visible or not?

Question

The code below can checks if the image is visible or not.

$('#div1 img:visible')

Which selects all image descendants and:

$('#div1 > img:visible')

I just need to know that when I iterate over every image in a container like dgImages $("#dgImages] img").each(function () {} how I can determine that the image is visible or not ? Can I write something like if($(this:visible)){//Do something}?. Thanks.

Look at the jQuery documentation at first http://docs.jquery.com/Main_Page — Nazmul, Dec 23 '11 at 08:42

score 5 · Answer 1 · answered Dec 23 '11 at 08:41

5

You can use is() to check your object against any selector:

if($(this).is(':visible')) { ... }

answered Dec 23 '11 at 08:41

David Hedlund

128,221
31
203
222

score 5 · Accepted Answer · answered Dec 23 '11 at 08:46

5

$("#dgImages").find('img').each(function(){
   if($(this).is(':visible')){
     alert("This image is visible");
    }
});

answered Dec 23 '11 at 08:46

dku.rajkumar

18,414
7
41
58

score 4 · Answer 3 · answered Dec 23 '11 at 08:41

4

You can use .is():

if ($(this).is(':visible')) {
  ...

answered Dec 23 '11 at 08:41

Blender

289,723
53
439
496

user8109 · Answer 4 · 2011-12-23T09:23:24.107

This page demonstrates an alternative approach using display: http://acarna.com/vis-test.php

Rather than looking at every single image I've used a class to identify a specific group of images that need to be toggled. Clicking the 'Toggle' button tests .css("display") to get the current display state and toggle it to inline or none accordingly.

View the source on the above page for more details.

If you have Firebug installed you can watch what happens to the markup as the display property is toggled between inline and none.

how to check image is visible or not?

4 Answers4

Linked