JS中图片缓冲loading技术的实例代码

2024-10-17 08:04:05

代码如下:

var Imgvalue;
var Count =13;   //图片数量
var Imgs = new Array(Count);
var ImgLoaded =0;
//预加载图片
function preLoadImgs()
{
alert('图片加载中请稍等......');
for(var i=0;i<Imgs.length;i++){
Imgs[i]=new Image();
downloadImage(i);
}
}
//加载单个图片
function downloadImage(i)
{
    var imageIndex = i+1; //图片以1开始
    Imgs[i].src = "images/"+imageIndex+".jpg";
    Imgs[i].onLoad=validateImages(i);
}
//验证是否成功加载完成，如不成功则重新加载
function validateImages(i){
if (!Imgs[i].complete)
    {
     window.setTimeout('downloadImage('+i+')',200);
    }
else if (typeof Imgs[i].naturalWidth != "undefined" && Imgs[i].naturalWidth == 0)
    {
    window.setTimeout('downloadImage('+i+')',200);
    }
    else
    {
        ImgLoaded++
        if(ImgLoaded == Count)
        {
            document.getElementById('BtnStart').disabled=false;
            document.getElementById('BtnStop').disabled=false;
            alert('图片加载完毕！');
        }
    }
}
//开始
function RandStart()
{
    Init = setInterval('SetRand()',50);
}
//随机显示
function SetRand()
{
    imageIndex = Math.floor(Math.random()*Count);
    document.getElementById("ImgView").src = Imgs[imageIndex].src;
}
//结束
function RandStop()
{
    window.clearInterval(Init);
}

JS判断页面加载状态以及添加遮罩和缓冲动画的代码

复制代码代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHei
原生JS实现匀速图片轮播动画

JS实现轮播图实现结果图: 需求: 1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片,定时轮播图片:鼠标在图片上时暂停 4 左右两侧可点击轮播图片一.布局部分 html部分 <div class="w main clearfix"> <div class="slider"> <ul class="imgs"
javascript匀速动画和缓冲动画详解

关于网页中的动画,在css3中我们已经可以使用一些属性快速的做出来,但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画. 使用js做动画最重要的一个函数就是setInterval函数,这里不再赘述,不懂可以直接百度用法.本文主要讲动画的原理已经在制作过程中的要点. 老规矩,先上代码,能直接看懂的可以节省时间. html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charse
js实现缓冲运动效果的方法

本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整代码: <!DO
js 全兼容可高亮二级缓冲折叠菜单

在后台或OA系统中最常用到的布局往往是一个全屏布局,一般都是上中下三行两列布局,页头.页脚.左侧菜单加一个右侧ifame框架页.所以那种带折叠的二级菜单是会经常使用到的,本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单. 特点: 全兼容,浏览器测试:IE5.5.IE6.IE7.IE8.FF3.0.谷歌.Safari 4.0.Opera9.0. Html结构优雅简洁,无多余标签,利于程序循环输出. 样式与结构分离,你可以在样式表中修改不同的风格. 当前选中项高亮状态,一级菜单和二级菜单都
漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)

在线演示 http://img.jb51.net/online/tab08/index.htm li,ul{margin:0;padding:0;list-style-type:0} body{background:#eee; text-align:center;} li img{vertical-align:bottom; } .dhooo_tab{ width:460px; margin:10px; background:#fff url(images/main_bg.gif) repeat
javascript 层展开/关闭，带缓冲效果

层展开/关闭 - 运动缓冲效果 /* 函数名称: Scroll Scroll(obj, h, s) 参数说明: obj,[object] id值或对象. 必需 h,[height] 展开后的高度. 可选(默认为200px) s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}. 函数返回值: true 展开(对象的高度等于展开后的高度) false 关闭(对象的高度等于原始高度) */ function Scroll(obj,
JavaScript中的匀速运动和变速(缓冲)运动详细介绍

一个div的运动其实就是它与浏览器边框的距离在变动.如果他变化的速率一定,那就是匀速运动:如果变化的速率不一定,那么就是变速运动.当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动. 其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离. 比如匀速运动: 进入定时器:(每隔30ms做) if(是否到达终点) { 停止定时器} else do{ 改变距离} 改变距离的方法决定是匀速还是变速(缓冲)运动. 匀速的比如: 复制代码代码如下
原生javascript实现匀速运动动画效果

本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

JS中图片缓冲loading技术的实例代码

相关推荐

随机推荐