gpt4 book ai didi

javascript - 使用 JavaScript 预加载图像

转载 作者:行者123 更新时间:2023-11-28 05:29:40 26 4
gpt4 key购买 nike

我检查了其他几个论坛,但无法正常工作。网站上有三张带有悬停效果的图片。在第一个页面加载时,悬停效果需要一秒钟来加载背景图像。

这是我之间的

<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

然后我的 body 标签中有这个:

<body  <?php body_class(); ?> onLoad="MM_preloadImages('http://agconcretepro.com/wp-content/uploads/2016/07/designreplace2.png','http://agconcretepro.com/wp-content/uploads/2016/07/ConcreteREPLACE.png','http://agconcretepro.com/wp-content/uploads/2016/07/no_title_paver.png')">

不适用于我需要预加载的三个图像。我还从谷歌搜索中复制并粘贴了它,并尝试将它放在我的 header.php 中的不同位置,但无济于事。

       <script type="text/javascript">

if (document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();

img1.src = "http://agconcretepro.com/wp-content/uploads/2016/07/designreplace2.png";
img2.src = "http://agconcretepro.com/wp-content/uploads/2016/07/ConcreteREPLACE.png";
img3.src = "http://agconcretepro.com/wp-content/uploads/2016/07/no_title_paver.png";
}

</script>

这里的任何帮助都会很棒!谢谢!

最佳答案

尝试这样的事情:

<body imageURL1="path/to/your/image1" imageURL2="path/to/your/image2" imageURL3="path/to/your/image3" imageURL4="path/to/your/image4">
<div id="home-image-container"></div>

然后使用 jQuery 你可以这样做:

function home_load_background(){
//Load first image and start timer

var $body = $('body');

var $fader = $('#home-image-container');

var $temp = $('<div />');

var images = [];

images.push(
$body.attr('imageurl1'),
$body.attr('imageurl2'),
$body.attr('imageurl3'),
$body.attr('imageurl4')
);

for (var i = 0; i < images.length; i++) {
var $img = $('<img />').attr('src', images[i]);

$temp.append($img);
};

$fader
.append($temp.find('img'))
.find('img').first().on('load', function(){
$fader.fsslider({
width: $fader.width(),
height: $fader.height(),
spw: 5,
sph: 4,
delay: 8000,
sDelay: 100,
effect: 'rand',
texture: 'strip1',
navigation: false,
animDuration: 1200,

});
});
}

准备好文档后,您可以调用您的函数:

$(document).ready(function(){
home_load_background();
});

你有没有看到我使用 FSSlider 来显示其他图像。但是,您可以使用任何您想要的。

关于javascript - 使用 JavaScript 预加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38579339/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com