To provide two pictures preload progress bar effect code, can be loaded on the site picture is slow to provide, so you can increase the user experience Oh, we use a JS and MooTools instance code.
<script>
var l=0;
var IMGs;
var sum=0;
function Chk () {
document.getElementById ("AA"). innertext= "" + (SUM-L) *100/sum) + "%"
l--;
if (l==0) {
for (Var i=0;i<imgs.length;i++) {
Imgs[i].style.display= ';
}
}
}
</script>
<body>
<img src= "/jscss tutorial/www.jzread.com/wall1.jpg"/>
<div id= "AA" ></div>
<script>
Imgs=document.getelementsbytagname ("img");
Sum=l=imgs.length;
for (Var i=0;i<l;i++) {
Imgs[i].onload=chk;
imgs[i].onerror=chk;//executes the specified method regardless of whether the picture was successfully loaded
Imgs[i].style.display= ' None ';
}
</script>
</body>
Pre-loading progress bar based on MooTools picture
Window.addevent (' Domready ', function () {
/* progress bar */
var ProgressBar = new Dwprogressbar ({
Container: $ (' Progress-bar '),
startpercentage:0,
speed:750,
boxid: ' Box ',
Percentageid: ' perc ',
Displayid: ' text ',
displaytext:true
/* preloading */
var images = [' 1.jpg ', ' 2.jpg ', ' 3.jpg ', ' 4.jpg ', ' 5.jpg ', ' 6.jpg ', ' 7.jpg ', ' 8.jpg ', ' 9. JPG ', ' 10.jpg '];
//asset.images A set of picture files preloaded
var loader = new Asset.images (images, {
//When all pictures are loaded, trigger
Onprogress:function (counter,index) {
Progressbar.set ((counter + 1) * (100/images.length));
},
//Every time a picture finishes loading
oncomplete:function () {
Images.each (function (IM) {
new Element (' img ', {src:im, width:200, Style: ' Width:200px;margin:20px 20px 20px 0; '}. Inject ($ (' images-holder '));
});
}
});
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
