CODEWITHSUNDEEP
jqueryhtmlcss
Centro
Centro

Reputation: 4012

jQuery removeClass(), how it works

I have images on my page. User can add more images onto the page by clicking a button. New images are added asynchronously. Initially, each image on page use a special class to be used when the image is loaded. After the image is loaded, that class is removed. Each image being loaded has the class imageLoading:

<img class="imageLoading" scr="someimage.png">

After those images are loaded, I remove that class (simplified code without details):

 $('img.imageLoading')
         .each(function(){ $(this)
         .load(function(){ $(this)
         .removeClass('imageLoading');
                               });});

Visually, I see that style is removed. But when I run the query again:

$('img.imageLoading')

I see via debugging that all images, not just loading ones, are returned, i.e. it works like I didn't remove the class for the images that were already loaded. I had a look into the page source, and I saw that actually in HTML the class was not removed, though removeClass() was called.

Is that behavior by design that all visual changes are applied but the class attribute is not removed in HTML code? If so, how it can be workarounded in this case. Or, probably, I missed something.

UPD Source code

I didn't resolved the problem yet, so post some code to show how it works and where the problem is. My code works this way (unimportant details removed):

Loading images are processed:

after page loading:

    <script type="text/javascript">
       $(function() { processLoadingImages(); })
   </script>

after asynchronous call:

function onRequestComplete(result) {
            var div = document.createElement('div');
            div.innerHTML = result;
            document.getElementById('images').appendChild(div);
            processLoadingImages();
        }

Processing images by processLoadingImages function:

function processLoadingImages() {
         $('img.loadingImage').each(function() {
        if (!imageLoaded($(this)[0])) {
            $(this).hide()
                .load(function() {
                    removeImageLoadingClasses(this);
                    $(this).fadeIn();
                });
        }
        else {
            removeImageLoadingClasses(this);
        }
    });
}
function removeImageLoadingClasses(jqueryObj) {
        jqueryObj.removeClass('loadingImage');
        jqueryObj.parents('div').removeClass('loadingImageContainer');      
    }
    function imageLoaded(img) {
        if (!img.complete)
            return false;
        if (typeof img.naturalWidth != 'undefined' && img.naturalWidth == 0)
            return false;
        return true;
    }

As you can see, for each image there is a div container with a class that is removed for loaded images. How did I check that the query retuns all images even those for which removeClass was called? I debugged imageLoaded function (see above), and it's always called for all the images.

Upvotes: 1

Views: 1666

Answers (5)

Centro
Centro

Reputation: 4012

I'm sorry about much ado about nothing. I've just incorrectly passed the jQuery object into the subroutine:

removeImageLoadingClasses(this)

instead of

removeImageLoadingClasses($(this))

So it's okay now.

Upvotes: 0

rahul
rahul

Reputation: 187100

Inspect using a debugging utility like firebug and observe the result. Changes that you make to the DOM using javascript won't be reflected in page source.

Upvotes: 3

Samuel De Backer
Samuel De Backer

Reputation: 3461

try .removeClass('imageLoading'); in place of .removeClass('imageloading');

Upvotes: 3

Reigel Gallarde
Reigel Gallarde

Reputation: 65274

Is that behavior by design that all visual changes are applied but the class attribute is not removed in HTML code?

answer: YES

with firebug in firefox, or web dev tools in google chrome, you can see the changes... but not the original code changes...

Upvotes: 1

kgiannakakis
kgiannakakis

Reputation: 104188

When you view the code in the browser, you see the original code sent by the server. You should see an instance of the DOM to verify that the class is there. You can do that easily in Firefox with Firebug.

Unless you have reloaded the page, the new query shouldn't match the images that the imageloading class was removed. Check also that the code that runs the removeClass method operates as expected. Firebug is a great tool to test such behaviour.

Upvotes: 3

Related Questions