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

最新推荐文章于 2024-07-31 08:45:55 发布

MIKUScallion

最新推荐文章于 2024-07-31 08:45:55 发布

阅读量2.6k

点赞数 1

分类专栏：前端开发文章标签： javascript 图片加载 web html

本文链接：https://blog.csdn.net/MIKUScallion/article/details/45176359

版权

本文介绍了如何使用JavaScript优化大图加载，通过先加载小图占位，待大图加载完成后再替换，提升用户体验。文章提供了一个Angular服务的实现，详细讲解了代码逻辑，包括初始化方法、图片加载处理以及示例应用。

摘要由CSDN通过智能技术生成

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

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

如果能够在加载大图时，先使用一张较小的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