Slm. arkadaşlar. html ile hazırlanmış java scriptlerle harektlendirilmiş, ve büyük boyutlu resimler kullandığmız siteninin url si çağırıldığında, flash da olduğu gibi önce sayfadaki grafikleri ve içeriği yükleyip sonra ziyaretciye sayfayı göstermesini istiyorum.
site flash değil. html bir siteyi "yükleniyor %30 " gibi bir şekilde preloading uygulaya bilirmiyiz?
biraz araştırma yaptım fakat hep flash siteler için örnekler var.
bu işleme status bar da diyorlar galiba.
<head></head> arasına;
<script type="text/javascript">
var locationAfterPreload = "main.php" // Preloaddan sonra gidecek adres
var lengthOfPreloadBar = 150 // Preload bar genişliği (pixel)
var heightOfPreloadBar = 2 // Preload bar yüksekliği (pixel)
// Preload barın yükleyeceği dosyalar
var yourImages = new Array("images/1.gif","images/2.gif","images/3.jpg","images/4.png")
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "images/000000.gif" // Preload bar zemin rengi
dots[1] = new Image(1,1)
dots[1].src = "images/ff3048.gif" // Preload bar maske rengi
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><bod></body> arasına;
<script type="text/javascript">
document.write('%0 ')
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(' %100 Sayfa yükleniyor, lütfen bekleyiniz..')
</script>