javascript图片加载---加载大图的一个解决方案

网页在加载一张大图片时，往往要加载很久；

而且，在加载过程中，无法很好地控制图片的样式，容易造成错位等显示错误；

如果能够在加载大图时，先使用一张较小的loading图片占位，然后后台加载大图片，当大图片加载完成后，自动替换占位图，

这样能提供更好的用户体验；

由于，我在开发一个图片查看器时，遇到这样的需求，所以我写了个angular服务，来解决这个问题，效果还不错；

虽然是angular服务，当是把里面核心代码抽出来也可以单独使用；

来分享下源代码：

一：

    var imgloader = new Object();imgloader.placeholder = new Image();

imgloader是主要的对象

placeholder 用于存储占位图片

二：

        imgloader.init = function(placeholderPath,width,height){imgloader.placeholder.src = placeholderPath;imgloader.placeholder.width = width;imgloader.placeholder.height = height;}

init是imgloader的初始化方法，主要指定了占位图片的文件，已经它的宽高；

设置宽高的目的是为了在占位图还未加载完成时也能进行布局

三：

imgloader.load = function(imgElem,imgSrc,callback){//清除之前的onload函数if(imgElem.lastload){imgElem.lastload.onload = function(){};}loadok = false;var testImg = new Image();testImg.src = imgSrc;if(testImg.complete == true){imgElem.src = testImg.src;imgElem.width = testImg.naturalWidth;if(imgElem.hasAttribute("height")){imgElem.removeAttribute("height");}}else{imgElem.src = imgloader.placeholder.src;imgElem.width = imgloader.placeholder.width;imgElem.height = imgloader.placeholder.height;//只读属性
//               imgElem.naturalWidth = imgElem.width;
//               imgElem.naturalHeight = imgElem.height;
//               console.log(imgElem.naturalWidth+"|"+imgElem.naturalHeight);//绑定onload函数testImg.onload = function(){imgElem.src = testImg.src;imgElem.width = testImg.naturalWidth;if(imgElem.hasAttribute("height")){imgElem.removeAttribute("height");}if(callback){callback();}};imgElem.lastload = testImg;
//           imgloader.loadingArray.push(imgElem);}};

1.一开始，如果对同一个图片元素设置了多个load，则只有最后一个生效，之前的都会被替换；

2.使用大图的src设置一个img做测试，如果这张图片已经加载过了，那就直接设置上这张大图；

3.注意这里我还原了被设置元素的宽高，为的是避免被设置元素的宽高收到占位符宽高的影响；

4.小技巧：设置完width后，把height属性移除的话，height会自适应width

5.如果testImg（大图）未加载完成，则先用占位图代替，注意被设置图片的宽高被修改成与占位图相同的大小；

6.为testImg（大图）绑定onload函数，当大图加载完成后，被设置元素的src替换成大图的src，并恢复大图的框高；

7.有设置回调的，可以在回调中再做些事情；

8.设置这个imgElem已经绑定一个大图（再次绑定的话，这个会被消去）

9.小技巧：naturalWidth与naturalHeight是只读属性

四：

一个例子：

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><style>img{max-width: 100%;   }#img1{width:  200px;height: 200px;}#img2{width: 200px;height: 200px;}</style></head><body><img id="img1"><img id="img2"><script src="mikuImgLoader3.0.js"></script><script>imgloader.init("dokidoki.gif",200,200);imgloader.load(img1,"001.jpg");imgloader.load(img2,"002.jpg");</script></body>
</html>

例子中可以看出：还可以用css控制被设置图片的大小

五：

完整代码：

//miku图片加载器3.0
var imgloader = new Object();imgloader.placeholder = new Image();
//    imgloader.loadingArray = new Array();imgloader.init = function(placeholderPath,width,height){imgloader.placeholder.src = placeholderPath;imgloader.placeholder.width = width;imgloader.placeholder.height = height;};imgloader.load = function(imgElem,imgSrc,callback){//清除之前的onload函数if(imgElem.lastload){imgElem.lastload.onload = function(){};}var testImg = new Image();testImg.src = imgSrc;if(testImg.complete == true){imgElem.src = testImg.src;imgElem.width = testImg.naturalWidth;if(imgElem.hasAttribute("height")){imgElem.removeAttribute("height");}}else{imgElem.src = imgloader.placeholder.src;imgElem.width = imgloader.placeholder.width;imgElem.height = imgloader.placeholder.height;//只读属性
//               imgElem.naturalWidth = imgElem.width;
//               imgElem.naturalHeight = imgElem.height;
//               console.log(imgElem.naturalWidth+"|"+imgElem.naturalHeight);//绑定onload函数testImg.onload = function(){imgElem.src = testImg.src;imgElem.width = testImg.naturalWidth;if(imgElem.hasAttribute("height")){imgElem.removeAttribute("height");}if(callback){callback();}};imgElem.lastload = testImg;
//           imgloader.loadingArray.push(imgElem);}};
//    //清除加载队列的所有onload函数
//    function clearOnload(loadingArray){
//        for(var i=0;i<loadingArray.length;i++){
//            var loading = loadingArray[i];
//            loading.onload = function(){};
//        }
//    };

javascript图片加载---加载大图的一个解决方案相关推荐

php 页面加载图片卡,javascript,图片_js动态加载image导致浏览器很卡，javascript,图片 - phpStudy...
js动态加载image导致浏览器很卡 function addImage(logo,userid,name,style){ console.log("addImage"); var ...
JavaScript 图片切换展示效果
JavaScript 图片切换展示效果看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 先看 ...
javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技 ...
转javascript图片预加载技术
今天看一篇文章,再谈javascript图片预加载技术(http://www.planeart.cn/?p=1121) http://www.qiqiboy.com/2011/05/20/javasc ...
浅谈android中加载高清大图及图片压缩方式(二)
这一讲就是本系列的第二篇,一起来聊下关于android中加载高清大图的问题,我们都知道如果我们直接加载原图的话,一个是非常慢,需要等待一定时间,如果没有在一定的时间内给用户响应的话,将会极大影响用户的 ...
【JavaScript】图片的懒加载
[JavaScript]图片的懒加载文章目录 [JavaScript]图片的懒加载 1. 懒加载 2. 利用`scroll`事件利用`HTMLElement.offsetTop` 利用`Eleme ...
ios 图片加载内存尺寸_iOS加载超清大图内存暴涨问题解决
加载超清大图是会引起内存爆表的问题,最近一直困扰着我. SDWebImage在加载大图时做的不是很好,加载大图内存爆表.YYWebImage会好一点,但还是不行. 当不要求图片质量的情况下,最好是在上 ...
html图片怎么预加载,如何利用CSS和Javascript实现图片预加载
说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...
3种Javascript图片预加载的方法详解
3种Javascript图片预加载的方法详解预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度. 这对图片画廊及图片占据很大比例 ...

javascript图片加载---加载大图的一个解决方案

javascript图片加载---加载大图的一个解决方案相关推荐

最新文章

热门文章