Question

我有一个非常适合预加载图像的脚本，并且进度条与它一起非常有效。

我需要百分比计数器。它可以集成到现有的脚本中吗？

目前显示静态“0％”。如果我无法添加到此脚本并在完成时自动计算0％到100％，那么我将完全删除0％。

这是小提琴链接：https://jsfiddle.net/flipflopmedia/5fpk4a0c/5/

<head>

<title>Preload Image Page</title>

<script>

// You may modify the following:
var locationAfterPreload = "http://www.google.com" // URL of the page after preload finishes
var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
var yourImages = new Array(
    "http://www.safarivet.com/wp-content/themes/safarivet/images/careers/imagemap/Safari_Career_Path.png",
    "http://www.safarivet.com/wp-content/themes/safarivet/images/careers/imagemap/Safari_Career_Path_with_Rollovers_ani-2-new.gif"
)

// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array() 
dots[0] = new Image(1,1)
dots[0].src = "http://www.safarivet.com/wp-content/themes/safarivet/images/careers/imagemap/preload_black_bar.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
dots[1] = new Image(1,1)
dots[1].src = "http://www.safarivet.com/wp-content/themes/safarivet/images/careers/imagemap/preload_blue_bar.gif" // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage =  Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() { 
for (i = 0; i < yourImages.length; i++) { 
    preImages[i] = new Image()
    preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) { 
    loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) { 
    location.replace(locationAfterPreload)
    return
}
for (i = 0; i <= preImages.length; i++) {
    if (loaded[i] == false && preImages[i].complete) {
        loaded[i] = true
        eval("document.img" + currCount + ".src=dots[1].src")
        currCount++
    }
}
timerID = setTimeout("checkLoad()",10) 
}

</script>

</head>

<body>

<center>
<p>
Please be patient while some images<br>
are being preloaded...
</p>
<p>
0%
<script>
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p><small><a href="javascript:window.location=locationAfterPreload">Skip    Preloading</a></small></p>')
</script>
</p>
</center>

在真实环境中，它会在所有内容预加载后重定向到我选择的页面。脚本的那部分在小提琴中不起作用，所以不要担心自己。

提前谢谢！

预加载文本/十进制％百分比计数器

0 个答案: