如何使用.load来.prepend内容而不刷新页面？

Question

我正在尝试使用jQuery仅在视口高于指定宽度时才加载某些内容。

这有效，但不太对。查看底部的JsFiddle链接，了解工作演示。

这是我到目前为止的内容;

• 如果视口低于500px #wrapper 隐藏了media query。
• 高于500px #wrapper 设置为visibility: visible;
• jQuery正在寻找element.is(':visible')。当发生这种情况时，jQuery会加载图像。
• 调整浏览器窗口大小会激活media query，但不会激活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>

CSS

#wrapper {
visibility: none;
display: none;
  }

   @media only screen and (min-width: 500px){
   #wrapper {
          visibility: visible;
        display: block;
        }}

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">');
  }

JsFiddle链接：

https://jsfiddle.net/tu60wbbu/13/

Answer 1

您可以使用window.matchMedia()代替$(window).resize()让您的javascript响应CSS中的媒体查询匹配。
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

它在各种浏览器中得到了相当好的支持。 http://caniuse.com/#search=matchmedia

如果您需要支持IE 9或更低版本，则可能需要回退使用$(window).resize()这些浏览器。

Answer 2

以下是我的评论代码：

$(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();
    }
}); 

});

工作小提琴：https://jsfiddle.net/tu60wbbu/14/
我在演示中使用了1000px作为屏障。

您应该在加载时按窗口宽度正确初始化large。出于演示目的，我使用false作为初始值。

很抱歉，我接种了疫苗： - ）