<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var IE=navigator.appName=="Microsoft Internet Explorer";
var Opera=navigator.appName.toLowerCase()=="opera";
var FF=!IE && !Opera;
function LoadImage(arrSrc,callBack)
{
this.Length=arrSrc.length;
this.LoadedLen=0; //已经被加载的图片个数
var self=this;
if(self.Length<1)
{
callBack(arrSrc);
return;
}
//经测试,OPERA与别的浏览器加载方式不同,所以特别独立开来...
if(Opera)
{
for(var i=0;i<self.Length;i++)
{
var tmpImg=new Image();
tmpImg.src=arrSrc[i];
tmpImg.onload=function()
{
self.LoadedLen++;
if(self.LoadedLen==self.Length && callBack) callBack(arrSrc);
}
}
return;
}
this.Load=function()
{
self.LoadedLen++;
document.getElementById("counter").innerHTML=self.LoadedLen;
if(self.LoadedLen<self.Length) self.DownImg();
else if(callBack) callBack(arrSrc);
}
this.DownImg=function()
{
var tmpImg=new Image();
tmpImg.src=arrSrc[self.LoadedLen];
if(IE)
{
if(tmpImg.readyState=="complete") self.Load();
else tmpImg.onreadystatechange=function()
{
if(this.readyState=="complete") self.Load();
}
}
else tmpImg.onload=self.Load;
}
this.DownImg();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id="counter"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var arr=['http://www.baidu.com/img/baidu_logo.gif','http://wb.caike.com/images/logo.gif','http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif'];
var t=new LoadImage(arr,function(arr)
{
var str="";
for(var i=0;i<arr.length;i++)
{
str+="<img src='"+arr[i]+"' /><br>";
}
document.body.innerHTML+=str;
});
//-->
</SCRIPT>
</BODY>
</HTML>
分享到：
相关推荐
在网页设计和开发中，图片预加载是一种优化用户体验的重要技术，特别是对于图片密集型的网站，如图片相册、电商网站等。`jQuery图片预加载代码`是利用JavaScript库jQuery和特定的插件，如`ydxLazyLoad.js`，来实现这...
在jQuery中，我们可以创建一个函数来处理图片预加载。以下是一个简单的预加载函数示例： ```javascript function preloadImages(imgArray) { $(imgArray).each(function(index, imgSrc) { var img = new Image();...
wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip
总之，jQuery LazyLoad是一个强大的图片预加载工具，通过它我们可以有效地提升网页性能，优化用户体验。无论是在移动设备还是桌面端，它都能发挥出显著的效果，是现代网页开发中的一个不可或缺的工具。熟练掌握并...
在微信小程序开发中，图片预加载是一个非常关键的优化步骤，尤其对于图片密集型的应用，如电商、社交或游戏类应用。预加载技术允许开发者在用户实际需要之前提前下载图片资源，减少用户等待时间，提升用户体验。这个...
本话题主要围绕"jQuery 预加载图片"这一主题展开，我们将深入探讨jQuery库如何帮助开发者实现图片预加载功能。 jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互等多个方面的工作...
图片预加载技术是Web开发中的一个重要概念，尤其是在处理大量图像或者多媒体内容的网站时，能够显著提升用户体验。本文将深入探讨“图片预加载js”这一主题，包括预加载的原理、实现方式以及如何使用JavaScript来...
图片预加载技术是一种优化网页性能的方法，特别是在网页中包含大量图片或者动态展示图片时尤为重要。它的主要目的是在用户浏览页面之前提前加载图片，减少用户等待时间，提高用户体验。本篇文章将详细探讨图片预加载...
本文将详细探讨如何使用JavaScript实现图片预加载，并通过一个具体的示例代码来解析其实现过程。 #### 一、图片预加载的基本概念 图片预加载是指在用户请求页面时，预先加载页面中即将显示或可能需要的图片资源。...
本文将详细探讨如何使用jQuery实现图片预加载，并分享一个基于jQuery的预加载插件的使用方法。 首先，了解预加载的基本概念。图片预加载是指在用户实际看到图片之前，就已经在后台开始加载图片资源。这样做的好处...
在本文中，我们将深入探讨“图片预加载学习”的第三部分，重点关注无序加载以及如何实现图片切换。在网页设计和开发中，图片预加载是一项重要的技术，它可以帮助提高用户体验，尤其是当网页包含大量图片时。预加载...
图片预加载技术是一种优化网页性能的方法，主要用于提升用户体验，尤其是对于图像密集型的网站或应用。当用户浏览网页时，预加载技术会提前加载部分或全部未来可能需要的图片资源，这样在用户实际查看这些图片时，...
此外，压缩包中的"jiaoben6685"文件可能是一个示例代码文件，开发者可以参考其结构和逻辑，进一步理解预加载代码的具体实现。 总之，jQuery页面区域预加载代码通过巧妙地利用jQuery的功能，实现了对多个页面区块的...
在微信小程序开发中，图片预加载是一个非常关键的优化步骤，尤其对于图片密集型的应用，如电商、社交或媒体类应用。预加载技术允许开发者在用户实际需要之前提前下载图片资源，减少用户等待时间，提升用户体验。本篇...
在网页设计中，图片预加载是一项重要的优化技术，它的目的是提前加载用户可能需要的图片，以提高用户体验，减少页面加载时间。"图片预加载loading"就是这个概念的具体应用，它通常会在页面的主要内容加载之前，预先...
在网页设计和开发中，图片预加载和延迟加载是两种重要的优化策略，它们可以显著提升网站性能和用户体验。本文将详细探讨使用jQuery实现这两种技术，以及它们如何协同工作以优化页面打开速度。 首先，让我们理解预...
图片预加载是指在浏览器中预先加载图片，以提高用户体验和减少流量消耗的一种技术。JS 实现图片预加载可以通过使用 Image 对象来实现图片的预下载，并且可以结合容器的宽和高，按照一定的缩放比例使图片显示出来。 ...
在本例中，我们使用的jQuery版本为1.3，虽然这是一个较旧的版本，但其核心功能依然足够完成图片预加载的任务。 图片预加载的核心在于，在图片实际显示之前，提前发起请求获取图片数据。这样当用户滚动到相应位置或...
**preloadjs 图片预加载插件详解** 在Web开发中，图片预加载是一项重要的优化技术，它可以提升用户体验，确保图片在需要时能够迅速显示。preloadjs 是一款强大的JavaScript库，专为实现资源预加载而设计，包括图片...