多编辑器分屏加载

weiwei-0926 2012-12-19

当一个页面有很多编辑器需要加载时,因为内容太大,页面会很卡

如下是改写了一个随滚动条加载图片的js:

 

(function ($) {
    $.fn.scrollLoading = function (options) {

        var editors = [];
        var length = $(this).length;

        $(this).each(function () {
            var id = $(this).attr("id");
            //重组
            var data = {
                obj: $(this),
                id: id,
                hasRender: false
            };
            editors.push(data);
        });

        //动态显示数据
        var loading = function () {
            var st = $(window).scrollTop(), sth = st + $(window).height();
            var editors_index = [];
            $.each(editors, function (i, data) {
                if (data.hasRender == false) {
                    var o = data.obj;
                    if (o) {
                        post = o.position().top; posb = post + o.height();
                        if ((post > st && post < sth) || (posb > st && posb < sth)) {
                            //在浏览器窗口内
                            var editor = new baidu.editor.ui.Editor({
                                minFrameHeight: 100,
                                elementPathEnabled: false,
                                toolbars: [['Bold', 'Italic', 'Underline', 'StrikeThrough', 'Superscript', 'Subscript', 'Image', '|',
                                        'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyJustify', 'ForeColor', 'BackColor', 'MultiMenu', 'Help']]
                            });
                            editor.render(data.id);
                            editor.setContent(data.id);
                            data.hasRender = true;

                            editors_index.push(i);
                        }
                    }
                }
            });

            //如果已经加载完毕则去掉scroll事件
            if (editors_index.pop() == length - 1) {
                $(window).unbind("scroll", loading);
            }

            return false;
        };
        //事件触发
        //加载完毕即执行
        loading();
        //滚动执行
        $(window).bind("scroll", loading);
    };
})(jQuery);

 拖动滚动条时,获取当前屏幕中的编辑器,如果状态为“未加载”,则加载

脚本中使用的是 百度的UEditor

Global site tag (gtag.js) - Google Analytics