<html>
<body>
<div id="testMessage" style="border:2px solid skyblue;width:300px;height:60px"></div>
<div id="photoContrl" style="display:none">
<button onclick="prevPhoto()">Previous</button>
<button onclick="nextPhoto()">Next</button>
<button onclick="autoPlay()" id="pp">Play</button>
<button onclick="stopPlay()">Stop</button>
</div>
<div style="border:1px solid gold;width:600px;background:dodgerblue"><img src="http://img.jb51.net/online/slide/jb51.gif" id="photo" style=""></div>
</body>
</html>
<script>
function tM(Message)
{
$("testMessage").innerHTML=Message
}
function dR(topr)
{
document.write(topr)
}
function $(eleId)
{return document.getElementById(eleId)}
//预载图片
var imasrc=new Array("http://img.jb51.net/online/slide/10254068.jpg"
,"http://img.jb51.net/online/slide/10254629.jpg"
,"http://img.jb51.net/online/slide/10255187.jpg"
,"http://img.jb51.net/online/slide/10255626.jpg"
,"http://img.jb51.net/online/slide/10260076.jpg"
,"http://img.jb51.net/online/slide/10260471.jpg"
,"http://img.jb51.net/online/slide/10261022.jpg"
,"http://img.jb51.net/online/slide/10261479.jpg")//图片路径写入数组
var preIma=new Array()
var dB=new Date()
for (i=0;i < imasrc.length;i++)//预载所有图片
{
preLoadImg(i)
}
function preLoadImg(imgIndex)//预载指定图片图片
{
preIma[imgIndex]=new Image()
preIma[imgIndex].imgReadyStatus=false
preIma[imgIndex].imgIndex=imgIndex
preIma[imgIndex].onload=imgLoad
preIma[imgIndex].onerror=imgError
preIma[imgIndex].onabort=imgAbort
preIma[imgIndex].src=imasrc[imgIndex]
}
function imgLoad()//预载完成
{
this.imgReadyStatus=true
}
function imgError()//预载失败
{
preLoadImg(this.imgIndex)
}
function imgAbort()//预载取消
{
preIma.splice(this.imgIndex,1)
}
var checkAgain
function checkImgReadyStatus()//检索加载状态
{
var imgReadyStatus=true
var persent=0
var dE=new Date()
for (i=0;i < preIma.length;i++)
{
if (!preIma[i].imgReadyStatus)
{imgReadyStatus=false}
else
{persent++}
}
tM("完成:"+(persent/preIma.length*100).toFixed(2)+"%<br>载入:"+persent+"张图片<br>消耗时间:"+((dE-dB)/1000).toFixed(0)+"秒")//显示进度
if (imgReadyStatus)
{
$("photoContrl").style.display="block"
autoPlay()
clearTimeout(checkAgain)
}
else
{
checkAgain=setTimeout(checkImgReadyStatus,1000)//检索频率
}
}
checkImgReadyStatus()
//幻灯片效果
var photoIndex=0//初始化图片索引
var opacity=10//初始化透明度
var direct="--"//初始化透明度矢量
var doPlay//定义播放
var doAutoPlay//定义自动播放
function prevPhoto(){play(-1)}//前翻
function nextPhoto(){play(1)}//后翻
function autoPlay()//自动播放
{
if (doAutoPlay)
{
clearInterval(doAutoPlay)
doAutoPlay=null
$("pp").innerHTML="Play"
}
else
{
play(1)
doAutoPlay=setInterval("play(1)",3000)//定义自动播放频率
$("pp").innerHTML="Pause"
}
}
function stopPlay()//停止播放
{
clearInterval(doAutoPlay)
doAutoPlay=null
photoIndex=0
play(0)
$("pp").innerHTML="Play"
}
function play(act)//执行动作
{
if (preIma.length!=0)
{
if (doPlay) {clearInterval(doPlay)}
doPlay=setInterval(switchPhoto,10)
photoIndex=(photoIndex+act+preIma.length)%preIma.length
}
}
function switchPhoto()//切换照片
{
eval("opacity"+direct)
setOpa(opacity)
if (opacity <= 1)
{
direct="++"
$("photo").src=preIma[photoIndex].src
}
else if (opacity >= 10)
{
direct="--"
clearInterval(doPlay)
}
}
function setOpa(opacity)//改变透明度
{
if ($("photo").style.filter!=null)
{$("photo").style.filter="alpha(opacity="+opacity*10+")"}
else
{$("photo").style.opacity=opacity/10}
}
</script>
分享到：
相关推荐
预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。 Image()对象 最简单的图像预装载办法是使用JavaScript新建一个新的Im
在MFC（Microsoft Foundation Classes）框架中，`CComboBox`控件是用于创建下拉框的，它允许用户从预定义的选项中选择一个。然而，标准的`CComboBox`只支持文本显示，不直接支持图片。但在某些情况下，如设计用户...
- 图像预加载：对于关键路径上的图像，可以使用预加载技术，在后台提前加载，确保用户到达相应位置时图像已经准备好。 3. 最佳实践： - 使用正确的图像格式：JPEG适用于照片，PNG适合透明图像，WebP和AVIF等新型...
4. **图片预加载**：为了防止图片加载延迟导致用户体验下降，可以使用JavaScript进行图片预加载。这样，当用户点击图片时，放大图已经在后台加载完成，可以快速显示出来。 5. **响应式设计**：考虑到不同设备的屏幕...
此外，为了优化用户体验，我们还需要考虑性能问题，如延迟加载（lazy loading）、图片预加载和适当的错误处理。例如，只有当图片进入视口时才加载，可以使用Intersection Observer API来实现。 总结起来，...
- 性能优化：如使用缓存技术减少服务器负载，提供图片预加载功能，提高用户体验。 7. **开发流程**： - 需求分析：明确系统功能和目标用户群体。 - 设计：制定UI设计、数据库模型和系统架构。 - 编码：使用JSP...
6. **图片预加载**：如果图片较大，为了提高用户体验，通常会先加载一部分或全部图片，这需要使用预加载技术。 7. **Transition effects**：为了让轮播更吸引人，可能会添加过渡效果，如淡入淡出、滑动等。这些效果...
- **Web Workers**：后台线程处理图片的预加载，避免阻塞主线程，提升页面响应速度。 5. **性能优化** - **图片压缩**：使用适当的图片格式（如WebP）、压缩工具（如TinyPNG）减小图片大小。 - **响应式图片**：...
2. **创建图片容器**：在舞台上创建一个或多个显示对象（如MovieClip）作为图片容器，每个容器将装载一张图片。 3. **应用3D变换**：使用DisplayObject的`transform.matrix3D`属性来设置3D旋转和平移。ActionScript...
7. **图片预加载**：为了确保图片的流畅展示，开发者可能会实现预加载机制，避免因图片加载延迟导致用户体验下降。 8. **响应式设计**：在现代网页设计中，适应不同设备和屏幕尺寸的响应式设计是必要的。AS3可以...
通过配置定时器的预分频器、自动重装载寄存器以及比较寄存器，可以精确控制脉冲的宽度和周期。 5. **死区时间**：为了防止开关器件同时导通导致短路，会在两个互补的PWM通道之间设置死区时间。在STM32中，可以通过...
5. 可能的优化：为了提高用户体验，瀑布流布局通常会采用预加载策略，提前加载部分即将出现在视口的图片。此外，还可以利用Intersection Observer API来监听元素是否进入视口，进一步优化加载性能。 在分析和学习这...
- **预加载技术**: 为了避免用户等待，可以预加载下一组图片，提高用户体验。 5. **查看方式** - **滑动浏览**: 用户可以通过左右箭头或触摸滑动切换图片。 - **全屏模式**: 提供全屏查看选项，让用户沉浸在照片...
- **图片预加载**：为了提供流畅的用户体验，Lightbox会预先加载下一张图片。 - **动画效果**：使用CSS3的transition或JavaScript实现图片的缩放、淡入淡出效果。 - **响应式设计**：确保Lightbox在不同屏幕尺寸...
4. 功能扩展：除了基本的滑动和缩放，此插件可能还提供了其他高级功能，如预加载图片以减少延迟、添加懒加载机制以提高性能、设置图片导航指示器、支持手势回放等。这些特性都是为了让用户在浏览相册时感受到更加...
6. **优化与性能**：考虑到3D渲染可能带来的性能问题，开发者可能采用了缓存策略、预加载技术以及高效的算法来优化加载速度和运行性能。 7. **响应式设计**：虽然Flash主要应用于桌面环境，但现代的实现可能考虑了...
Initializing usb Controllers..done 装载USB控制 2048MB OK 内存为2GB 开启计算机或重新启动计算机后，听见自检通过的声音后，按 “Del”键就可以进入CMOS的设置界面；要注意的是，如果按得太晚，计算机将会启动...
为了提供更好的用户体验，还可以考虑添加滚动动画、图片预加载等优化。需要注意的是，从Android 3.0（API级别11）开始，Gallery控件已经被废弃，建议使用`RecyclerView`配合水平滚动的布局管理器（如`...
- **图像识别技术**：利用图像识别技术，帮助用户快速找到与他们感兴趣的图片相类似的产品。 **2. 智能搜索和导航** - **自然语言处理技术**：理解用户的搜索意图，提供准确的搜索结果，节省用户查找商品的时间。 ...