相关疑难解决方法(0)

我正在使用基于百分比的CSS网格系统.我有一个4列的网格,每个页面的总宽度的25%.我在每个"25%单元格"中输出我的图像标签,如下所示:

<img src="foo.jpg" style="max-width:100%" />

随着浏览器调整大小,图像也会调整大小以填充每个25%单元格的100%.浏览器选择一个高度,好像我放了"height:auto"(省略时隐含).

现在我想为此添加延迟加载功能.问题是在加载图像之前,它们在页面上的高度是未知的.浏览器必须下载图像并观察其纵横比,并计算它的高度.在此之前,所有图像的高度均为1px.由于每个图像的高度均为1px,因此它们都被视为"在视口内"并立即加载.

目前我有一个概念验证,在输出img标签之前,我在服务器上计算图像宽高比,并在数据属性中输出:

<img src="foo.jpg" style="max-width:100%" data-aspect="1.7742" />

然后,在事件"文档就绪"时,我遍历每个图像并在延迟加载之前设置固定的"高度"值(以像素为单位):

$('img').each(function() {
        var img = $(this);
        var width = img.width();
        var ratio = img.data('aspectratio');
        var height = width / ratio;
        $(this).css('height', height+'px');
    });

这似乎是有效的,因为它不再同时加载所有图像,但只在我滚动时加载图像.

但是,它似乎可能会导致新问题,例如当用户调整浏览器大小时图像会变得拉长.当一个回调触发延迟加载完成后,我必须将'height'切换回'auto'.这将照顾用户看到的图像 - 但是在缩小浏览器大小时,折叠下方的图像仍然会有不正确的"高度"值.每次调整浏览器大小时,我都必须迭代以前在首屏下方的所有图像,测量它们的更新宽度,读取它们的宽高比,并更新新的高度,然后重新触发延迟加载以处理现在高于折.如果我不这样做,由于这些图像具有错误的高度值,可能会过早或过晚触发加载.

我的问题是,除了我在这里描述的确切方法之外,还有其他方法可以延迟加载具有未知高度的图像,以及这会产生什么后果？我的方法有什么缺点,除了它是一个痛苦的程序？

我正在开发一个eshop.基于类别的产品页面我推出了一些基于javascript的过滤.但是,如果某个类别包含大量产品,则会出现问题.这个链接有类似的东西我做... http://www.snowandrock.com/sunglasses/snowboard/fcp-category/list?resetFilters=true

这个页面是多么痛苦地慢,超过2mb!

每个产品对我来说需要一半killobyte但图像是问题..所以我正在寻找如何懒加载图像..因为我的页面分页不同于该网站我认为加载仅对页面可见的图像是一个解决方案.然而,探针是如何做到这一点,以便为javascript和非javscript启用的人工作..我唯一的解决方案是将链接存储在css类中,以某种方式存储不可见产品的图像,如果在过滤更改后显示通过javascript图像src ...非JavaScript用户没有这个问题,因为点击过滤器将导航到其他页面...

还有其他想法吗？

我有我的网页上的bootstrap轮播,我希望它是懒惰的负载.我在互联网上找到了这段代码:

$("#myCarousel").bind("slid", function(){
    $img = $(".active img", this);
    $img.attr("src", $img.data('lazy-load-src'));
});

这会导致轮播在单击下一个按钮(或上一个)按钮时"加载"当前图像.我希望它不加载当前图像,而是加载之后的图像,以及当前图像前面的图像,这样我仍然可以获得漂亮的滑动动画.而不是加载图像.

所以我的问题是如何在单击下一个按钮时将lazy-load-src设置为上一个图像的src和下一个图像的下一个图像？

我需要帮助在 Bootstrap 4 中制作卡片动画。

我有 4 个卡盒，如下图所示，这是一个简单的引导 4 卡牌，带有 4 个卡盒。

每当用户滚动到此部分时，我都会尝试从右侧一一滑动每个框。如何实现？

我不想制作滑块/旋转木马。

作为参考，请检查此codepen

4个盒子每个需要来自右边。在 codepen 中，以上所有内容都是从左侧立即出现的。当用户滚动到该部分时，我需要从右侧逐一获取它。

这是我正在使用的 boostrap 4 卡的代码

       <!-- Card Row starts here -->
   <div class="card-deck ">
      <div class="card card-detail card-text1">
         <img class="card-img-top img-fluid" src="images/Analytics.png" alt="Card image cap">
         <div class="card-body">
            <h5 class="card-title text-center">Analytics</h5>
            <p class="card-text text-center text-justify ">Our amazing tracking platform allows you to view in-depth analytics for your traffic as well as our dashboard provides proprietary reporting with actionable statistics to analyze and optimize your …