Javascript 如何在不刷新页面的情况下使用.load to.prepend内容？

我试图使用jQuery仅在视口超过指定宽度时加载某些内容

这是可行的，但并不完全正确。查看底部的JsFiddle链接以获得一个可用的演示

这是我到目前为止所拥有的

• 如果视口低于500px#包装器将使用

  媒体查询隐藏

• 高于500px#wrapper设置为

  可见性：可见

• jQuery正在查找

  元素。是（':visible'）

  。发生这种情况时，jQuery将加载图像
• 调整浏览器窗口的大小会激活

  媒体查询

  ，但不会激活

  jQuery

• jQuery

  仅在页面刷新时触发

我尝试过使用

$（window）.resize（function（）

），但每次视口改变大小时都会触发该命令，从而复制内容

有没有办法在不刷新页面的情况下激活

jQuery

理想的解决方案是：

• 高达500px无负载
• 当视口的大小调整到500px以上时，加载jQuery
• 如果视口的大小调整到500px以下，则卸载jQuery内容

HTML

 <p>CSS hides <strong>#wrapper</strong> if viewport is below 500 pixels.</p>
 <div id="wrapper">
<p>jQuery checks CSS to see if <strong>#wrapper</strong> is visible and loads image on page refresh.</p>
<p>I'm looking for a way to run this function without needing to refresh the page. I've looked into using (resize) function, but this duplicate the content.</p>

JQuery

  $(function() {

 var element = $(this).find('#wrapper');

 if (element.is(':visible')) {
$('#wrapper').prepend('<img src="http://cache.desktopnexus.com/thumbseg/1134/1134934-bigthumbnail.jpg" alt="Demo image">');
  }

$（函数（）{
var元素=$（this.find（'#wrapper'）；
if（element.is（':visible'））{
$（'#wrapper'）。前缀（''）；
}

JSIDLE链接：

---

您可以使用

window.matchMedia（）

而不是

$（window）。resize（）

让javascript响应CSS中的媒体查询匹配。

它在各种浏览器中都得到了很好的支持。

---

如果您需要支持IE 9或更低版本，您可能不得不退回到使用这些浏览器的

$（window）.resize（）

。

以下是我的评论代码：

$(function() {
var large = false;
var barrier = 1000;

$( window ).resize(function() {
    if(!large && $(window).width() > barrier) {
        large = true;
        $('#wrapper').prepend('<img src="http://cache.desktopnexus.com/thumbseg/1134/1134934-bigthumbnail.jpg" alt="Demo image">');
    } else if(large && $(window).width() < barrier) {
        large = false;
        $('#wrapper img').remove();
    }
}); 

});

$（函数（）{
var大=假；
var屏障=1000；
$（窗口）。调整大小（函数（）{
如果（！large&&$（window）.width（）>barrier）{
大=真；
$（'#wrapper'）。前缀（''）；
}else if（大&&$（窗口）.width（）

工作小提琴：
我在演示中使用了1000px作为屏障

您应该根据加载时的窗口宽度正确初始化

large

。出于演示目的，我使用

false

作为初始值

---

很抱歉，我在vaccation:-）

使用

$（窗口）。调整大小（函数（）

并设置令牌。只要设置了令牌，就不要做任何事情，直到窗口大小小于500px，然后再次删除令牌。你能给我一个代码示例吗？这对于较新的浏览器来说很好。谢谢分享。

$(function() {
var large = false;
var barrier = 1000;

$( window ).resize(function() {
    if(!large && $(window).width() > barrier) {
        large = true;
        $('#wrapper').prepend('<img src="http://cache.desktopnexus.com/thumbseg/1134/1134934-bigthumbnail.jpg" alt="Demo image">');
    } else if(large && $(window).width() < barrier) {
        large = false;
        $('#wrapper img').remove();
    }
}); 

});