我想用jquery或JavaScript预加载两个sprite图像,这些sprite图像不会显示,直到页面完全加载。我尝试了this,this,this,this等等,但这些都不适合我。但是,基于CSS HTML的简单解决方案可行。 但是我有很多页面,所以我不能使用CSS HTML解决方案,而是我想使用一些jquery解决方案,以便在所有页面都可以访问的单个.js文件中工作。
基于CSS Html的解决方案。
<div id="preload">
<img src='_ls-global/images/layout-images/layout.png'/>
<img src='_ls-global/images/layout-images/layout2.png'/>
</div>
<style>
#preload{ display: none;}
</style>
由于这个基于CSS HTML的解决方案正在运行,我使用这样的jQuery实现它,但它无法正常工作。
$(window).load(function(){
$("<div/>", {
"id": "preload",
"css": { "display" : "none"},
}).prependTo("body");
$("<img src='_ls-global/images/layout-images/layout.png'/>").appendTo("#preload");
$("<img src='_ls-global/images/layout-images/layout2.png'/>").appendTo("#preload");
});
请建议任何可行的方法。
感谢。
答案 0 :(得分:2)
批量图像预加载:
window.onload = function() {
//preload images: set path, enter image names
var path = '../images/';
var images = [
'my_image.png',
'my_image2.png'
];
for (image in images) {
new Image().src = path + images[image];
}
}
答案 1 :(得分:0)
为什么那么困难?!?
只是这样做:
<script>
$(window).load(function(){
new Image().src = '_ls-global/images/layout-images/layout.png';
new Image().src = '_ls-global/images/layout-images/layout2.png';
});
</script>
这就是诀窍。不需要任何标记。