Question

需要建议什么是最佳解决方案。

我正在进行RWD照片库页面。基本上，如果通过桌面访问并使用移动设备访问时的照片，我会使用漂亮的照片。

我做的是这个：

<a href="large_image" class="desktop" rel="prettyPhoto"><img src="sample_image" /></a>
<a href="large_image" class="mobile" rel="external"><img src="sample_image" /></a>

我使用媒体查询隐藏（显示：无）其中一个，具体取决于屏幕大小。这是一个正确的方法，我读到使用display：none不会减少加载时间。我的画廊里有数百张照片，我担心这可能会大大影响加载时间。对此有什么好的解决方案吗？

Answer 1

为什么你需要两个标签？

<a href="large_image" class="desktop" rel="prettyPhoto"><img src="sample_image" /></a>
<a href="large_image" class="mobile" rel="external"><img src="sample_image" /></a>

您可以使用单个标签实现相同的目标。

<a href="large_image" class="desktop_and_mobile" rel="prettyPhoto"><img src="sample_image" /></a>

现在使用媒体查询，您可以在两个媒体查询上使用相同的desktop_and_mobile类，并相应地定义css属性。

这样做的好处是您只能加载一张图片，而不是两张图片。

Answer 2

我认为你想要的是让锚标签在点击时调用正确的灯箱，因为使用响应式css设置sample_img样式将按预期工作，不需要花哨的东西，但如果我是正确的那么你有我认为有3种选择，你可以像你说的那样使用媒体查询隐藏.desktop链接，因为用户不必再次加载该图像，并设置为display:none用户浏览器不会渲染该元素，所以唯一的缺点是你会有一个混乱的HTML，它会感到浑浊，但我认为没有其他问题。

另一个选择是使用像这样的js代码，但是因为通常灯箱代码会有一个方法来向他们找到的每个链接添加事件处理程序（使用正确的格式化，比如它的rel），你将不得不在更改链接rel attr之后手动触发该事件，或者在发生之前执行adaptLinks()，在这种情况下，在Windows调整大小时它将无法工作，除非你按照我之前说的做。为此，您可以检查如何在灯箱页面上执行此操作，它们可以列出该方法。

以下是代码

var adaptLinks = (function(){
    var $winHeight = $(window).height();
    var $lightBoxLinks = $('a.lightBox');

    return function() {  
        var isPrettyPhoto = false;

        if($winHeight < 1000){
             $lightBoxLinks
                .removeClass('desktop')
                .addClass('mobile')
                .attr('rel','external');
        } else {
             $lightBoxLinks
                .removeClass('mobile')
                .addClass('desktop')
                .attr('rel','prettyPhoto');

                isPrettyPhoto = true;
        }

        // Call the link processing method of the lightbox
        if(isPrettyPhoto) {
           $lightBoxLinks.prettyPhoto();
        } else {
          // photoSwipe method
        }

    }

})();    

$(window).resize(adaptLinks());

这个选项是使用适用于桌面和手机的灯箱，我认为这是正确的方法。

祝你好运。

css display：none用于响应式网页设计

2 个答案: