Question

Hello Stack Overflow社区，

我正在建立一个包含大量图片的网站（约800个）。我正在使用flexslider，这也很棒。但是，如果我想在手机上观看它，一切都工作得非常慢，所以我想减少图像的数量，这就是我想出来的。 HTML

<div class="engbikesWrapper">

    <div id="slider" class="flexslider">
      <ul class="slides">
        <li><img src="assets/img/engbikesPics/001.jpg" /></li>
        <li><img src="assets/img/engbikesPics/002.jpg" /></li>
        <li><img src="assets/img/engbikesPics/003.jpg" /></li>
        <li><img src="assets/img/engbikesPics/004.jpg" /></li>
        <li><img src="assets/img/engbikesPics/005.jpg" /></li>
        <li><img src="assets/img/engbikesPics/006.jpg" /></li>
        <li><img src="assets/img/engbikesPics/007.jpg" /></li>
        <li><img src="assets/img/engbikesPics/008.jpg" /></li>
        <li><img src="assets/img/engbikesPics/009.jpg" /></li>
        <li><img src="assets/img/engbikesPics/010.jpg" /></li>
        <li><img src="assets/img/engbikesPics/011.jpg" /></li>
        <li><img src="assets/img/engbikesPics/012.jpg" /></li>
       </ul>
    </div>

    <div id="carousel" class="flexslider">
      <ul class="slides">
        <li><img src="assets/img/engbikesPics/001.jpg" /></li>
            <li><img src="assets/img/engbikesPics/002.jpg" /></li>
            <li><img src="assets/img/engbikesPics/003.jpg" /></li>
            <li><img src="assets/img/engbikesPics/004.jpg" /></li>
            <li><img src="assets/img/engbikesPics/005.jpg" /></li>
            <li><img src="assets/img/engbikesPics/006.jpg" /></li>
            <li><img src="assets/img/engbikesPics/007.jpg" /></li>
            <li><img src="assets/img/engbikesPics/008.jpg" /></li>
            <li><img src="assets/img/engbikesPics/009.jpg" /></li>
            <li><img src="assets/img/engbikesPics/010.jpg" /></li>
            <li><img src="assets/img/engbikesPics/011.jpg" /></li>
            <li><img src="assets/img/engbikesPics/012.jpg" /></li>

      </ul>
    </div>

</div>

这是Jquery：

if($(window).width()<400){
    $("#slider .slides li:odd").remove();
    $("#carousel .slides li:odd").remove();
 }

这是应该的工作。但是当浏览器大小超过400px时，怎样才能放回已移除的LI？希望收到你的来信。

维姆

Answer 1

您可以尝试hide对象：

var myObjects = $("#slider, #carousel").find("li:odd");

if($(window).width()<400){
    myObjects.hide();
}

/* and to display when you want */
myObjects.show();

Answer 2

var mql = window.matchMedia("screen and (max-width: 400px)")
if (mql.matches){ // if media query matches
   $("#slider .slides li:odd").remove();
   $("#carousel .slides li:odd").remove();
}

添加回来从flexslider中删除了li

2 个答案: