加载图片时实现的加载等待功能，监听JS添加及移除事件

今天做了生成海报时，让用户等待生成的功能。

 

具体来说，主要涉及几个技术点

 

1.持续循环显示加载的uqjs（在数据或图片还没有出来时）

 

2.当图片出来时，加载的效果去掉

 

代码如下

//targetDivId 显示加载的divId目标位置

//contentDiv 判断是否有内容的DIV

//contentType 加载出来的内容类型：中文(text),img

function loadingData(targetDivId,contentDiv,contentType) {

 

 

var load = new Loading();

    var timer = setInterval(function (event) {

        load.init({

            target: targetDivId

        });

        load.start();

 

        switch (contentType) {

            case "text":

 

                if (escape($(contentDiv)[0].innerHTML).indexOf("%u") !== -1) {

                    load.stop();

                    clearInterval(timer);

                }

 

 

                break;

            case "img":

                //如果海报已经生成。

                //if ($(contentDiv)[0].innerHTML.indexOf("src=") !== -1) {

                //    load.stop();

                //    clearInterval(timer);

                //}

 

 

               

                var theLoadImg = document.getElementById(contentDiv.replace("#", ""));

                

                

                //theLoadImg.addEventListener("load", function(){

                //    load.stop();

                //    clearInterval(timer);

                //});

 

 

                var handleLoaded = function() {

                    load.stop();

                    clearInterval(timer);

                    theLoadImg.removeEventListener("load", handleLoaded, false);

                }

 

                //1.添加事件

                //2.当加载完成时，执行该事件

                //内容如下：load.stop(); clearInterval(timer)

                //3.执行完后，移除事件

                theLoadImg.addEventListener('load', handleLoaded, false);

 

 

 

                

 

                

                

 

 

                break;

 

        }

 

        //通过 判断是否有中文以证明是否有内容,或是否有图片

 

 

    },

        200);

}

 

关于加载的代码，大家可以去这位朋友 那里去下载：

https://github.com/tianxiangbing/loading

 

而关于监听事件的功能，我有几点要说一说。目的除了让自己深刻理解原理语法

 

同时，也是让自己深讨JS更多的底层与灵活的用应：

 

代码如下：

  var handleLoaded = function() {

                    load.stop();

                    clearInterval(timer);

                    theLoadImg.removeEventListener("load", handleLoaded, false);

                }

 

                //1.添加事件

                //2.当加载完成时，执行该事件

                //内容如下：load.stop(); clearInterval(timer)

                //3.执行完后，移除事件

                theLoadImg.addEventListener('load', handleLoaded, false);

 

 

首先，

theLoadImg.addEventListener('load', handleLoaded, false);

告诉我们，添加一个事件，它调用的方法是handleLoaded，

上面是声明handleLoaded方法。

 

其实，如果用户只点击一次生成海报，添加事件就好了，但用户有可能第二次，又点击了一下。

 

为保证效果，

 

所以，我们先是添加一个图片加载事件，添图片load完，即执行 关掉加载效果及退出循环，且移除事件。

 

下次再进来，我们再添加事件，再结束时，我们再关掉加载及退出循环。

 

如此，便保持了正确的结果