重庆放心seo整站优化,厦门网站建设680,app应用开发公司,网站建站平台公司网站开发时经常需要在某个页面需要实现对大量图片的浏览#xff0c;如果考虑流量的话#xff0c;大可以像pconline一样每个页面只显示一张图片#xff0c;让用户每看一张图片就需要重新下载一下整个页面。不过#xff0c;在web2.0时代#xff0c;更多人愿意用javascript来… 网站开发时经常需要在某个页面需要实现对大量图片的浏览如果考虑流量的话大可以像pconline一样每个页面只显示一张图片让用户每看一张图片就需要重新下载一下整个页面。不过在web2.0时代更多人愿意用javascript来实现一个图片浏览器让用户无需等待过长的时间就能看到其他图片。 知道了一张图片的地址需要把它在一个固定大小的html容器可以是div等里边显示出来最重要的当然是需要知道这张即将显示的图片的宽和高然后再结合容器的宽和高按照一定的缩放比例使图片显示出来。因此实现图片预加载就成为图片浏览器的核心功能了。 做过图片翻转效果的朋友其实都知道要让图片轮换的时候不出现等待最好是先让图片下载到本地让浏览器缓存起来。这时一般都会用到js里边的Image对象。一般的手段无非这样function preLoadImg(url) { var img new Image(); img.src url;} 通过调用preLoadImg函数传入图片的url就能使图片预先下载下来了。实际上这里用到的预下载功能也和这基本一致。图片预下载下来后通过 img的width和height属性就能知道图片的宽和高了。但是需要考虑到在做图片浏览器功能时图片都是实时显示的。比如你点了显示的按钮这个时候才会调用上边类似的代码来加载图片。因此如果你直接用img.width的时候图片还没有完全下载下来。因此需要用一些异步的方法等到图片下载完毕的时候才会再对img的width和height进行调用。 实现这样的异步方法实际上不难图片的下载完毕事件也很简单就是简单的onload事件。因此我们可以写出下面的代码function loadImage(url, callback) {  var img new Image();   img.src url;    img.onload function(){ //图片下载完毕时异步调用callback函数。     callback.call(img);   // 将callback函数this指针切换为img。   };} 好了再来写一个测试用例。function imgLoaded(){   alert(this.width);}input typebutton valueloadImage οnclickloadImage(aaa.jpg,imgLoaded)/ 在firefox中测试一下发现不错果然和预想的效果一样在图片下载后就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。 不过做到这一步先别高兴太早——还需要考虑一下浏览器的兼容性于是赶紧到ie里边测试一下。没错同样弹出了图片的宽度。但是再点击load的时候情况就不一样了什么反应都没有了。刷新一下也同样如此。www.2cto.com 经过对多个浏览器版本的测试发现ie6、opera都会这样而firefox和safari则表现正常。其实原因也挺简单的就是因为浏览器的缓存了。当图片加载过一次以后如果再有对该图片的请求时由于浏览器已经缓存住这张图片了不会再发起一次新的请求而是直接从缓存中加载过来。对于 firefox和safari它们视图使这两种加载方式对用户透明同样会引起图片的onload事件而ie和opera则忽略了这种同一性不会引起图片的onload事件因此上边的代码在它们里边不能得以实现效果。 怎么办呢最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候因为不需要等待这个状态值就直接是表明已经下载了而从http请求加载时因为需要等待下载这个值显示为未完成。这样的话就可以搞定了。 经过一些分析终于发现一个为各个浏览器所兼容的Image的属性——complete。所以在图片onload事件之前先对这个值做一下判断即可。最后代码变成如下的样子function loadImage(url, callback) {    var img new Image(); //创建一个Image对象实现图片的预下载     img.src url;      if (img.complete) { // 如果图片已经存在于浏览器缓存直接调用回调函数         callback.call(img);        return; // 直接返回不用再处理onload事件     }      img.onload function () { //图片下载完毕时异步调用callback函数。         callback.call(img);//将回调函数的this替换为Image对象     };}; 经过这么一番折腾总算是让各个浏览器都能满足我们的目标了。虽然代码很简单但是却把图片浏览器中最核心的问题解决掉了接下来你所要做的仅仅是图片如何呈现的问题了 摘自 PainsOnline的专栏 转载于:https://www.cnblogs.com/woshikay/p/4050299.html