`
zjixuanlv
  • 浏览: 5024 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

JS中的图片缓冲技术

阅读更多
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);
}

分享到:
评论

相关推荐

    图片缓冲滚动效果

    在IT行业中,图片缓冲滚动效果是一种常见的用户界面(UI)设计技术,特别是在产品展示或图像密集型应用中,能够提供流畅、高效的用户体验。这个技术主要应用于网页、移动应用或者桌面软件,通过预先加载和缓存图片,...

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

    ### JS中图片缓冲loading技术的实例代码知识点解析 ...通过以上内容,可以看出JS图片缓冲技术在实际Web应用中的作用与实现方式,以及如何通过JavaScript进行图片资源的预加载,实现更流畅的用户体验。

    js幻灯片和图片缓冲

    综上所述,JavaScript幻灯片和图片缓冲技术是网页动态效果的关键组成部分,它们结合了DOM操作、定时器、异步加载等JavaScript特性,旨在提供更佳的视觉体验和性能优化。通过分析提供的文件,我们可以学习和实践这些...

    JS实现图片延迟加载(缓冲),非常实用

    在网页设计中,图片延迟加载(也称为懒加载)是一种优化技术,用于提高网页加载速度和用户体验。当用户滚动页面时,只有当前可视区域内的图片才会被加载,而不是一次性加载所有图片。这样可以减少初次加载页面时的...

    当当首页JS幻灯片效果图片缓冲

    接着,我们要考虑图片缓冲技术。为了防止图片加载延迟导致的用户体验下降,我们会预先加载下一张待显示的图片。这可以通过监听图片的`onload`事件来实现,当图片加载完成时,立即替换当前显示的图片。 再者,CSS...

    课程设计(精华)新浪微博图片缓冲技术_hyg源代码下载

    在本课程设计中,我们将深入探讨“新浪微博图片缓冲技术”,这是一个关键的计算机科学与信息技术领域,特别是对于优化网络应用性能而言。源代码下载提供了一个实际的实现案例,帮助学习者理解并掌握这一技术的核心...

    web缓冲技术实现

    下面将详细讲解Web缓冲技术的实现原理、常见类型以及其在实际应用中的策略。 一、Web缓冲技术的实现原理 1.1 缓存机制:Web缓存是一种临时存储Web资源(如HTML页面、图片、JavaScript和CSS文件)的技术,当用户...

    JS+CSS滚动图片展示,速度缓冲

    在网页设计中,JS(JavaScript)和CSS(Cascading Style Sheets)是两种至关重要的技术。JS主要用于增加页面的交互性和动态效果,而CSS则负责布局和样式设计。本话题聚焦于“JS+CSS滚动图片展示,速度缓冲”,这是一...

    css3页面的缓冲加载图片

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是页面的缓冲加载图片。这种技术主要用于在页面数据请求时展示一个加载动画,给用户一种反馈,告知他们内容正在加载。...

    双缓冲解决切换图片闪屏的实例

    通过分析和运行这个实例,开发者可以深入理解双缓冲技术,并将其应用到自己的图形应用中,提高程序的性能和用户体验。在实际开发中,还可以结合硬件加速、多线程等技术进一步优化图像处理效率,提供更加流畅的视觉...

    JavaScript实现的可自定义的幻灯片和图片缓冲效果

    在这个项目中,我们关注的是使用JavaScript实现的可自定义的幻灯片和图片缓冲效果。这种效果通常用于网站的首页或者产品展示区域,以吸引用户的注意力并提供良好的用户体验。 首先,我们要理解“幻灯片”(Slider)...

    Cesium 绘制缓冲区 点 线 面缓冲区

    在三维可视化领域,Cesium是一个强大的JavaScript库,用于创建交互式的、全球范围的3D地球浏览器。本主题将深入探讨如何使用Cesium绘制点、线和面的缓冲区,这在构建复杂的三维地理信息系统(GIS)应用时尤其有用。...

    点击图片或文字显示隐藏层,带缓冲效果(动画效果)

    总的来说,“点击图片或文字显示隐藏层,带缓冲效果(动画效果)”是一种常见的网页交互设计,它结合了前端开发中的多种技术,旨在提升用户体验和界面的吸引力。通过合理运用显示层、隐藏层、缓冲和动画效果,开发者...

    js模拟淘宝首页缓冲幻灯片效果

    在这个项目中,我们将深入探讨如何使用JS实现这一功能,以及涉及的关键技术和原理。 首先,幻灯片效果通常基于CSS3的动画和JavaScript事件处理。在淘宝首页的幻灯片设计中,主要的目标是让图片能够自动或手动地平滑...

    可自定义的幻灯片和图片缓冲代码

    图片缓冲技术则是只加载当前展示和即将展示的图片,其余图片在需要时才加载,这样可以提高页面的加载速度并优化用户体验。 3. **自定义配置**:可自定义的幻灯片组件通常支持多种参数调整,例如切换速度、动画效果...

    可自定义的幻灯片和图片缓冲代码.rar

    4. **数据加载优化**:为了提高页面加载速度,可能会实现图片缓冲技术。即在用户实际看到图片之前,先预加载下一张或多张图片,确保切换时无需等待图片加载。 5. **响应式设计**:考虑到现代网页需要适应不同设备和...

    可自定义的幻灯片和图片缓冲[1]...

    图片缓冲技术通过延迟加载或者预加载策略来改善这种情况。例如,只有当图片进入浏览器视口时,才会开始加载,或者在用户滚动到图片附近时预加载。这可以利用Intersection Observer API或者jQuery的lazyload插件来...

    js淘宝首页缓冲幻灯片.zip

    "js淘宝首页缓冲幻灯片"这个标题揭示了我们即将探讨的是一个使用JavaScript技术实现的,类似于淘宝首页的动态幻灯片效果。这种效果通常会在网站的首页展示,用来吸引用户注意力,展示重要信息或者产品。这里的“缓冲...

    jquery+干货不忽悠+很牛的全屏轮播大banner+图片居中+图片缓冲显示

    本项目中的“jquery+干货不忽悠+很牛的全屏轮播大banner+图片居中+图片缓冲显示”是一个利用jQuery实现的高效、功能强大的全屏轮播效果。该轮播图具有以下核心知识点: 1. **全屏轮播**:全屏轮播(Full-Screen ...

Global site tag (gtag.js) - Google Analytics