Question

嗨我想在加载实际图像之前加载gif图像。为此我得到了一个很好的例子

示例：

Java脚本

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">

此代码从HTML页面加载实际图像，但我想从CSS页面加载图像而不是从html页面加载图像。我正在使用CSS代码，如

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

Answer 1

也许你应该使用

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

...

更新：

这里有jsFiddle代码：http://jsfiddle.net/cc4ytbeq/2/

Answer 2

Krzysztof Trzos 示例为CSS图片网址提供额外的字符串，因此请使用此代码

Html代码

<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);
});
});

用于java脚本导入http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

在从css加载其他图像之前加载gif图像

2 个答案: