当前位置 : 主页 > 网页制作 > JQuery >

jquery window.innerWidth删除和替换内容

来源:互联网 收集:自由互联 发布时间:2021-06-15
我正在建立一个响应式网站,但不想只隐藏较小屏幕的元素,我想完全删除它们以减少加载时间. 到目前为止,我已经完成了这项工作 if (window.innerWidth 768) { $('.widescreen').remove();} 类.widescre
我正在建立一个响应式网站,但不想只隐藏较小屏幕的元素,我想完全删除它们以减少加载时间.

到目前为止,我已经完成了这项工作

if (window.innerWidth < 768) {
    $('.widescreen').remove();
}

类.widescreen被添加到仅在768px以上的屏幕上加载的所有元素

然后,如果用户调整浏览器窗口大小(或将设备旋转90°),我希望这可以工作,所以我尝试了这个:

$(window).resize(function() {
    //small-screen
    if (window.innerWidth < 768) {
        $('.widescreen').remove();
    }
    //end small-screen
});

哪个有效,但仅在调整窗口大小而未按较小尺寸加载时才有效.我猜想会发生这种情况.

有没有办法实现这一点,以便它在加载页面和调整浏览器窗口大小时都有效?

然后,当然,诀窍是在窗口调整大小超过768px时添加内容!但如果第一部分真的可能的话,我会试着想出那个!

$(function() {   
 $(window).resize(function() {
        //small-screen
        if (window.innerWidth < 768) {
            $('.widescreen').remove();
        }
        //end small-screen
    }) .resize(); // trigger resize event

})
网友评论