懒加载如何在点击时才调用?

众所周知懒加载的好处是在浏览器读取文件时不会执行函数,称为轻量加载,

但是有个问题我在给事件绑定时就自动的调动了,变成了自动加载。

如果才能在按钮点击时才绑定,然后还能执行?

<body>
    <button>按钮</button>

</body>
</html>
<script>
    var btn = document.getElementsByTagName('button')[0];

    var MYAPP = {};
    MYAPP.myevent = {
        addListener: function (el, type, fn){
            if (el.addEventListener) {
                MYAPP.myevent.addListener = function (el, type, fn){
                    el.addEventListener(type, fn, false);
                };
                console.log('先进');
            } else if (el.attachEvent) {
                MYAPP.myevent.addListener = function (el, type, fn){
                    el.attachEvent('on'+type, fn);
                };
                console.log('IE');
            } else {
                MYAPP.myevent.addListener = function (el, type, fn){
                    el['on'+type] = fn;
                }

            };
            MYAPP.myevent.addListener (el, type, fn);

        }
    };

    
        MYAPP.myevent.addListener (btn, 'click', function (){
            alert('惰性加载');
        });

阅读 1.7k
1 个回答

我理解的懒加载可能和你有些偏差,懒加载应该是异步请求回的数据太多,一次性放到页面进行渲染太浪费资源和效率,可以初期加载一部分,当页面往下看的时间才把剩余的加载上来,那这个事情就好办了,我以为可以把数据存成数组,存放到外部,判断页面滚动位置或页面事件进行分批分量加载数据。个人见解,望多指正。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题