Question

我正在寻找最佳方法。我的布局首先是移动设备，但平板电脑或桌面设备将更改为另一个分发。问题是当您第一次从平板电脑或桌面访问该页面时，因为您可以毫不费力地欣赏移动DOM版本。我的问题是，在加载页面之前加载重新排序的DOM的最佳方法是什么？将javascript带到body？在设置DOM时制作加载器？

任何建议都将受到赞赏。

这是我的代码：

function listenReorder( e ) {
    if ($(window).width() > 620) {
        $(".container-logo").insertAfter(".container-presentation");
        $(".languages").insertAfter(".container-presentation");
    }else{
        $(".container-presentation").insertAfter(".container-logo");
        $(".languages").insertAfter(".container-logo");
    }
};

$(window).on("load resize", listenReorder);

Answer 1

您可以使用媒体查询+支持通过order属性进行排序的CSS弹箱，而不是尝试使用javascript更改布局。

如果您真的想用javascript执行此操作：当domcontentloaded事件触发时，页面可能已经部分呈现。使用变异观察器或请求动画帧事件侦听器来检查HTML解析器是否已经将要更改的元素插入到DOM中，这样可以更快地进行这些更改，可能在旧状态变为用户可见之前。

在平板电脑或桌面上加载页面之前重新排序DOM

1 个答案: