Question

我有这个函数，根据窗口大小是否小于640px或更多，在DOM周围移动HTML元素。我正在使用 prepend 和追加移动图片，但由于每次调整窗口大小时该函数都会触发，我想我要求性能问题。

代码：

function moveDealsImage() {

    var mobile_width = 640;
    var wi = $(window).width();

    if (wi < mobile_width) {
        $( ".deals-header" ).prepend( $("div.htp") );
    } else {
        $( ".deals-header" ).append( $("div.htp") );
    }
}
window.addEventListener("resize", moveDealsImage);
moveDealsImage();

我需要让听众留在那里。

有没有办法做到这一点，但每次if或else语句变为true时，只会在之前添加/追加元素？（而不是在每次像素变化时发生）

Answer 1

您可以采取一些措施来优化此功能。

第一个选项是仅在状态从移动设备更改为桌面或反向时执行moveDealsImage函数。所有其他调整大小都可以忽略。

这可以通过使用以下代码来实现：

var mobile_width = 640;
var is_mobile = (window.innerWidth <= mobile_width);
function moveDealsImage(e) {

    // Only execute the function when then state changes from mobile to desktop or reverse
    if( 
        ! is_mobile && window.innerWidth > mobile_width || 
        is_mobile && window.innerWidth <= mobile_width 
    )
        return;

    // Update state
    is_mobile = (window.innerWidth <= mobile_width);

    console.log('your code here');
}
window.addEventListener("resize", moveDealsImage);
moveDealsImage();

另一个更好的解决方案是使用CSS媒体查询。这可以使用以下CSS和HTML来完成。

.desktop-deals-header {
   display: block;
}
.mobile-deals-header {
   display: none;
}

@media only screen 
and (max-width : 640px) {
   .desktop-deals-header {
      display: none;
   }
   .mobile-deals-header {
      display: block
   }
}

并在HTML中添加两个标题，一个用于桌面，另一个用于移动。

<div class="mobile-deals-header">Mobile header</div>
<div class="desktop-deals-header">Desktop header</div>

根据浏览器大小预先添加和附加内容

1 个答案: