解决了,以下是方法,如发现问题或有更好的修改方法,请修改之后发一份给我,或接这个帖子
appcan中的js延时显示图片
方法一,先将所有要延迟图片的元素加上.imgList这个类,而背景图片background-image先设置先本地默认的一个图片,而实际图片放在自定义属性onLoad-src中,完成左右图片之后使用遍历所有类的图片元素,利用image加载实际连接,加载完成之后,将实际连接替换到实际背景图片中。
$(".imgList").each(function(){
var obj=new Image();
//obj.src=$(this).attr("onLoad-src") ;
obj.src= $(this).attr("onLoad-src");
obj.alt = $(this).attr("id");
obj.οnlοad=function(){
$("#"+this.alt).css({"background-image" : "url("+this.src+")"});
// $(this).css({"background-image" : "url("+this.src+")"});
// alert(this.src);
}
})
方法二:
先将图片连接替换成默认图片,让图片下载完成之后再替换回来
//延迟加载图片
//className:要加载图片的div的类名
function loadPic(className) {
$(className).each(function() {
var dd = $(this);
var obj = new Image();
var bgImg = dd.css('backgroundImage');
obj.src = bgImg.substring(bgImg.indexOf("(") + 1, bgImg.indexOf(")"));
dd.css({
"background-image" : "url(css/res/d-img.png)"
});
obj.onload = function() {
dd.css({
"background-image" : "url(" + $(this).attr("src") + ")"
});
//alert(obj.src);
//dd.css({"background-image" : "url("+ obj.src +")"});
}
})
}