How to remove a class as each image is loaded


Tags: javascript,jquery,html,css

Problem :

I have a number of images on a page. Each image has a CSS spinner that I want to show before each image is loaded. At the moment, I have it where when 'img' loads, the class 'spinner' is removed. This works but isn't what I want, as it removes the class 'spinner' whenever any 'img' is loaded.

Each img has it's own spinner and I want to only remove each 'individual' spinner class as each image loads.

Here is a basic jsfiddle example: http://jsfiddle.net/Forresty/xvx6maty/

Here is the code:

HTML:

<div class="work_items_wrapper">
    <a class="work_item_link" href="#">
        <div class="spinner"></div>
        <img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
    </a>

     <a class="work_item_link" href="#">
         <div class="spinner"></div>
         <img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
     </a>

      <a class="work_item_link_no_margin" href="#">
          <div class="spinner"></div>
          <img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
      </a>
</div>

scss:

.work_items_wrapper{
    margin: 2.8em auto;
}

.work_item_link{
    position: relative;
    width: 32%;
    height: auto;
    float: left;
    margin-right: 2%;
    overflow: hidden;

    img{
        width: 100%;
        display: block;
    }
}

.work_item_link_no_margin{
    position: relative;
    width: 32%;
    height: auto;
    float: left;
    overflow: hidden;

    img{
        width: 100%;
        display: block;
    }
}

.spinner{
    width: 5em;
    height: 5em;
    background: red;
    position: absolute;
}

Javascript:

$('img').on('load', function() {
    $("div").removeClass("spinner");
}).each(function() {
    if(this.complete) $(this).load();
});

I replaced the first line of javascript with this to test again:

$('img').on('click', function() {

When I clicked only one of the images, all 3 spinner classes were removed.

How can I go about doing it so that when one image loads, that image's individual spinner is removed. Is it a case of looping through the images or something?

Any help would be highly appreciated.

Thanks.



Solution :

Try the following:

$(this).siblings('div').removeClass("spinner");

This will remove the class for the div which is on the same level and has the same parent as the img in question.

JS Fiddle Demo


    CSS Howto..

    How does Bootstrap Grid really work?

    How to position div element right below and left-aligned to another div

    Jsoup html parsing style="display:none; dont show the link

    How to make CSS menu bar activated only after my mouse cursor is at the menu.

    How to disable IE11 WebBrowser control scaling

    How to styles labels only within fieldsets using CSS?

    How to use CSS to modify an icon with the bootstrap collapse

    How to Use CSS transitions

    Show hint over a CSS background image on mouse over

    how to change 'inner' lineheight of css text

    How to style a table from horizontal layout to vertical layout with CSS

    How to get all child elements using an xpath selector?

    How to enlarge and tint photo with pure CSS and jQuery [closed]

    How to make elliptical inner shadow with CSS?

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    How to draw a half circle (border, outline only) [closed]

    css footer background didn't shows properly in html5

    How to set
  • Backgound color?
  • How to locate a list of webelement using Css selector in C#

    How can I get to see the full image in the background?

    How to horizontally center absolute text?

    How to hide and show div border line in my case?

    How to get the value of last assigned property in Sass or CSS?

    how to set html inline css from django

    How to make a bootstrap modal fade in from the bottom?

    How to have two css animations in one tag

    How to make pop up div locked to the page coordinates in jQuery

    How to keep text in textarea remain at the top?

    How can i make an arrow triangle using CSS without any cut in the side i.e. smooth sides?

    How to set background color based on YAML front matter (Jekyll)