js图片加载效果（延迟加载+瀑布流加载）

痛定思痛。 2022-05-31 08:57 633阅读 0赞

# 概述 #

两种图片加载的效果：一种是遇到图片较多时，带读条效果的加载提示；另一种是根据滑块的位置进行预加载，用户不察觉的情况下，实现瀑布流的加载效果

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10656.html][http_www.demodashi.com_demo_10656.html] ####

主要做了两种图片加载的效果

一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间）

另外一种是根据滑块的位置进行图片的预加载，在用户不察觉的情况下，实现瀑布流的加载效果

#### 一、延迟加载 ####

1、需要准备什么环境

2、需要开通什么服务，如果有的话

3、本例子实现什么功能

#### 二、程序实现 ####

主要思路：

1.  HTML的img标签中，将正确的地址存在data-src属性中，给所有图片设置一个转圈圈的loading图片作为background
2.  js中，依次读取每一个img，将data-src中的地址替换到src中，去掉background
3.  每成功加载一张图片，进度条的百分比进行相应的变化。
4.  如果加载不成功，就提示图片加载错误。

--------------------

HTML结构很简单，就是一个div.picList包裹了所有img，然后加上一个简单的进度条div\#loadBar

css（使用的scss，编译时会自动加上各种兼容前缀）

.lazy{
        background: url(../pic/loading.gif) center no-repeat;
        border: 1px solid black;
    }
    
    #loadBar{
        width: 200px;
        height: 15px;
        background: linear-gradient(90deg,#187103,#81b50b,#187103);
        border: 10px solid white;
    
        position: absolute;
        top: 150px;
        left: 50%;
        margin-left: -100px;
    
        #loadBarMask{
            width: 70%;//这个数值显示没有加载成功的图片
            height: 100%;
            background-color: beige;
            position: absolute;
            right: 0;
        }
    }

css里面需要注意的地方有两个：

*  一个是把图片加载错误时显示的灰底文字放在了img的after伪类中，当图片加载失败，又去掉了background的gif图片之后，就会显示这个部分的内容及样式。
 *  一个是进度条的样式。写得很简单，主要是一层带渐变的绿色和一层白色叠在一起。绿色表示已加载，白色表示未加载。显示的时候，直接控制白色那层的宽度即可。

js部分（直接执行loadPicPerSecond()即可）

#### 二、瀑布流加载 ####

主要思路：

1.  监听窗口滚动情况，当已经加载的图片的最后一张快要进入窗口的时候，开始加载下面的图片。
2.  假设所有的图片地址已经存在一个json数据中，每次读取10张图片地址，加载它们之后，插入到现有的瀑布流末尾。
3.  如此往复，直到加载完所有图片。

--------------------

HTML和前面部分相同，只是把src写成正常地址即可。css完全一样。

js部分

比较捉急的就是scrollTop、height那几个值的取值对象，总是记不清楚，所以按照js和jquery都写上了，以后可以直接用。将数值关系搞定之后，只要满足条件就触发加载即可。

#### 三、运行效果与文件截图 ####

1、运行效果

![blob.png][]

2、文件截图

![blob.png][blob.png 1]

双击"图片加载.html"即可运行。

#### 四、后记·兼容性问题 ####

拿到IE8之下运行时，发现img.onload后面的function打死都不执行，IE8智障到不能完成 img.onload = function()\{\}这么初级的代码么？

去查了资料之后，发现IE8虽然白痴，但还算没有智障到无药可救。

onload是可以调用的，但是要放在src的赋值之前。

简单来说，就是要先告诉浏览器图片加载完要怎么处理，再让它去加载图片。避免因为加载缓冲区的速度太快，在没有告诉它加载完要怎么办时，它已经加载完了。而其它浏览器则是从缓冲区读取到图片时就执行onload。

#### 注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_10656.html]: http://www.demodashi.com/demo/10656.html
[blob.png]: /images/20220531/f6c05c85b09b4eab906433ef0f312602.png
[blob.png 1]: /images/20220531/80799816af234753b03a125ceb9b174f.png
[http_www.demodashi.com]: http://www.demodashi.com/