Load the gif image before other image loading from css

Question

Hi i am trying to load gif image before loading the actual image. For that i got a good example

Example:

Java Script

function loadimage(imgsrc, change){
var loadimage = new Image();
loadimage.onload = changesrc(imgsrc, change);
loadimage.src = imgsrc;
}

function changesrc(imgsrc, change) {
change.src=imgsrc;
}

Html

<img onload="loadimage('http://upload.wikimedia.org/wikipedia/commons/4/49/Swiss_Jungfrau_mountains.jpg',this);" src="http://jimpunk.net/Loading/wp-content/uploads/loading2.gif">

This code loads actual image from HTML page, But i want to load the image from CSS page not from html page. I am using CSS code like

.class_name{
background: url('../images/image.jpg');
}

Answer 1

Maybe You just should use

var imgsrc = $jqueryObject.css('backgroundImage');

??

UPDATE:

Here's jsFiddle code: http://jsfiddle.net/cc4ytbeq/2/

Answer 2

Above Krzysztof Trzos example giving extra strings for CSS image URL so use this code

Html code

<img id="load_image1" class="load_image" src="images/ajax-loader.gif">

css

img#load_image1 { 
  background-image:  url('../images/2.jpg'); 
}

JS

$(function() {
$('img.load_image').each(function() {
    var imgsrc = $(this).css('backgroundImage');
    var newString = imgsrc.substr(4); // to remove first 4 characters
    var newString2 = newString.substr(0, newString.length-1); //to remove last one character
    //alert(newString2);
    $(this).attr('src', newString2);
});
});

for java script import http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js