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

【问题标题】：How to use .load to .prepend content without page refresh?如何在不刷新页面的情况下使用 .load 来 .prepend 内容？
【发布时间】：2015-06-19 12:37:58
【问题描述】：

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

这可行，但并不完全正确。查看底部的 JsFiddle 链接以获取工作演示。

这是我目前所拥有的；

如果视口低于 500 像素 #wrapper 将使用 media query 隐藏。
500px 以上 #wrapper 设置为visibility: visible;
jQuery 正在寻找element.is(':visible')。发生这种情况时，jQuery 会加载图像。
调整浏览器窗口大小会激活media query，但不会激活jQuery。
jQuery 仅在页面刷新时触发。

我尝试过使用$( window ).resize(function()，但这会触发每次视口改变大小，复制内容。

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

理想的解决方案是；

最多 500 像素不加载任何内容，
当视口大小调整到 500 像素以上时，加载 jQuery。
如果视口的大小调整到低于 500 像素，请卸载 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/

【问题讨论】：

使用$( window ).resize(function() 并设置一个令牌。只要设置了token，在窗口大小小于500px之前什么都不做，然后再次移除token。
你能不能给出一个代码示例？

标签： javascript jquery html css ajax

【解决方案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()。

【讨论】：

这对于较新的浏览器来说很不错。感谢分享。

【解决方案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 作为初始值。

抱歉很久了，我在度假:-)

【讨论】：