我有一些简单的 jquery 需要显示相应的 css 背景图片:
$(document).ready(function() {
console.log("ready!");
var tmp_src;
$('.home-slider li').mouseover(function() {
var src = $(this).find('a').attr('data-src');
console.log('src: ' + src);
$('.content-area').css('background-image', 'url(images/' + src + ')');
tmp_src = src;
});
$('.home-slider li').mouseout(function() {
console.log('src: ' + tmp_src);
$('.content-area').css('background-image', 'url(images/' + tmp_src + ')');
});
});
html部分是这样的
<ul class="home-slider">
<li><a href="#" data-src="test.jpg">Project 1</a></li>
<li><a href="#" data-src="test2.jpg">Project 2</a></li>
<li><a href="#" data-src="test3.jpg">Project 3</a></li>
</ul>
我似乎可以正常工作,但我看到一个闪光灯,那么我该如何预加载呢?还有什么好的效果可以使事情顺利进行???
问候
最佳答案
您可以这样做:为每个图像运行一次 jquery css 命令并将其应用于不可见的 div:
HTML
<ul class="home-slider">
<li><a href="#" data-src="test.jpg">Project 1</a></li>
<li><a href="#" data-src="test2.jpg">Project 2</a></li>
<li><a href="#" data-src="test3.jpg">Project 3</a></li>
</ul>
<div id="preloadbox" style="display:none"></div>
JS
$(document).ready(function() {
console.log("ready!");
// preload all images into invisible preloadbox div
$('.home-slider li a').each(function() {
var src = $(this).attr('data-src');
$('#preloadbox').css('background-image', 'url(images/' + src + ')');
console.log(src + ' preloaded');
});
var tmp_src;
$('.home-slider li').mouseover(function() {
var src = $(this).find('a').attr('data-src');
console.log('src: ' + src);
$('.content-area').css('background-image', 'url(images/' + src + ')');
tmp_src = src;
});
$('.home-slider li').mouseout(function() {
console.log('src: ' + tmp_src);
$('.content-area').css('background-image', 'url(images/' + tmp_src + ')');
});
});
这种方法不会减慢页面的呈现速度,因为它会在 DOM 准备就绪后运行。
此外:在您现有的代码中要小心,因为 tmp_src
可能尚未在 mouseout 上定义。
关于javascript - 我如何预加载与 onmouseover/onmouseout 一起使用的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29219582/