Question

我看到了这个解决方案，我不明白这里的预载位置在哪里：

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

在我的html文件中，我有这个部分：

<div id="slideShow">



    <img src="Images/radar000025.Gif" alt="slide" />
    <img src="Images/radar000203.Gif" alt="slide" />
    <img src="Images/radar000251.Gif" alt="slide" />
    <img src="Images/radar000267.Gif" alt="slide" />
    <img src="Images/radar000283.Gif" alt="slide" />
    <img src="Images/radar000284.Gif" alt="slide" />
    <img src="Images/radar000301.Gif" alt="slide" />
    <img src="Images/radar000539.Gif" alt="slide" />
    <img src="Images/radar000556.Gif" alt="slide" />
    <img src="Images/radar000571.Gif" alt="slide" />
    <img src="Images/radar000588.Gif" alt="slide" />
    <img src="Images/radar000589.Gif" alt="slide" />
    <img src="Images/radar000794.Gif" alt="slide" />
    <img src="Images/radar000810.Gif" alt="slide" />
    <img src="Images/radar000811.Gif" alt="slide" />
    <img src="Images/radar000812.Gif" alt="slide" />
    <img src="Images/radar000813.Gif" alt="slide" />
    <img src="Images/radar000814.Gif" alt="slide" />
    <img src="Images/radar000830.Gif" alt="slide" />
    <img src="Images/radar000831.Gif" alt="slide" />
    <img src="Images/radar000832.Gif" alt="slide" />
    <img src="Images/radar000833.Gif" alt="slide" />            



    <!-- #slideShow --></div>

然后在底部我正在调用javascript文件：

<script type="text/javascript" src="SlideShow.js"></script>

在SlideShow.js中，我有计时器，按钮和事件的功能。最后我有一个样式文件Screen.css用于所有样式。

我想做的是为所有图像制作预加载器，甚至可以使用progressBar来显示每个图像加载进度。

我看到了一些例子，我看到了上面这个小函数的答案，但我不确定如何将它与我的代码一起使用。

这是我的网站，其中包含有效的幻灯片，但没有预加载器：

Slide Show

这是SlideShow javascript文件和css文件：newsxpressmedia.com/SlideShow.js,newsxpressmedia.com/Screen.css

使用ajax进行预加载最好不确定。

Answer 1

希望这可能会对你有所帮助。试试这个

＆＃13;

@charset "utf-8";

/* Preloader */
#preloader {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:99; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(http://1.bp.blogspot.com/-IdPZAIYB_38/UAsThCuCjcI/AAAAAAAABK0/wzErRGy13NU/s1600/loading.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

＆＃13;

<body>
  
<!-- Preloader -->
<div id="preloader">
	<div id="status">&nbsp;</div>
</div>

    
  
  
<!-- Your Website Content -->
<div>
    This is your website content
    
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002407.Gif" />

</div>
  
  
  

<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

    
    
<!-- Preloader -->
<script type="text/javascript">
	//<![CDATA[
		$(window).load(function() { // makes sure the whole site is loaded
			$("#status").fadeOut(); // will first fade out the loading animation
			$("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
		})
	//]]>
</script> 
  
</body>

＆＃13;

如何为我的图像添加预加载功能？

1 个答案: