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 to import a css file only for Firefox but not for other browsers?

    How to add border between td's in which are in different tr's?

    how to overwrite global css to div tag which contains different html tags with different style

    How to always make page content appear beneath navigation bar?

    How to make a very simple coloured 1-line text area?

    How to manage CSS files on design A/B test

    HTML/CSS- how to align part of a cell to the left, and part to the right?

    How to overlap a child element of one div with`display:table-cell` over another div with `display:table-cell?`

    How to create a responsive top bar with CSS

    How do I get started with jQuery? [closed]

    How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?

    How to display 20 columns in html design

    How to Change the hover image in CSS

    How to show divs inline. css html

    How do I specify XPATH or CSS in Nokogiri to scrape a page's table data?

    how to use css button to post method in a form?

    CSS How to erase the border from the image link?

    How to display a div over other content and in the center of webpage using CSS?

    How to absolutely position element against page rather than floated parent?

    How would I control the position of a drop down select menu?

    Nested CSS: How to get to the child?

    How do I allow CSS files to be referenced from other domains?

    How to add a value in the y-axis at the bottom of a bar chart-css

    How to use css to style xhtml markup made only of divs like a table [closed]

    CSS how to deal with a lot of sprite without having to create a new css class

    How to make Wrapper div contain only non-overflowing divs

    How do I change button color on press in bootstrap?

    How to apply effect just to background image and not text

    How to get element by its partial class name CSS

    How to cancel specific one element at external CSS?