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

Question

我有这个功能，可以根据 window 大小是否小于 640 像素或更大，在 DOM 周围移动 HTML 元素。我正在使用 prepend 和 append 移动图像，但是因为每次调整 window 大小时都会触发该函数，我想我'我询问性能问题。

代码：

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 语句变为真时，只有 prepending/appending 元素一次？（而不是它发生在每个像素变化上）

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 中添加两个 headers，一个用于桌面设备，一个用于移动设备。

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

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

Prepend and append content based on browser size

javascript

jquery

append

addeventlistener

prepend