Question

我已经启动并运行了一个漂亮的响应式图库，使用prettyPhoto插件可以更轻松地查看图像。这种方式在台式机/笔记本电脑上运行得非常出色，但在移动设备上却非常糟糕。（加载时间越长，由于预定的CSS等而不适合屏幕的图像）

我可以告诉浏览器不要在移动设备上加载prettyPhoto.js，但是缩略图锚点仍会链接到完整尺寸的图像。（我不想要！缩略图足够移动，不需要全尺寸图像。）

必须有某种jQuery或JavaScript解决方案。我不确定最好的方法是什么，并希望有人能够提供一些解决方案来解决这个问题。

HTML：

<ul id="portfolio">
  <section id="photos">
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
  </section>
</ul>

编辑：

到目前为止我得到的是：

<script>
if ( $(window).width() < 767) {
   $('#portfolio img').unwrap();
)};
</script>

这似乎不起作用。有什么想法吗？

Answer 1

您可以使用.unwrap() jquery方法：

http://jsfiddle.net/fm9Un/1/

$(function(){ //DOM ready
    if($(window).width() < 767)
         $('#portfolio img').unwrap();
});

禁用li anchors mobile

1 个答案: