Question

我想懒加载我的bootstrap 3 carousel中加载的图像。我找到了一个pretty good solution，但问题是所有人都依赖于将<img src=...>更改为<img data-lazy-load-src=...>，但我无法做到这一点，因为我需要这些＆＃34; SRC＆＃34;所有人都被称为＆＃34; src＆＃34;因为非常深刻的第三方响应模块依赖于能够阅读“src”。（而且恰恰是＆＃39; src＆＃39;，而不是＆＃39; data-lazy-load-src＆＃39;。）

所以我想和this solution做同样的事情，但是没有引入新的＆＃34; data-lazy-load-src＆＃34; SRC。我可以通过引入一个类＆＃34; lazy-load＆＃34;来做同样的事情。或其他数据目标或类似的......或者在div＆＃34; item＆＃34;还是直接在<img>？

我不知道如何调整javascript来做到这一点。

来源：https://stackoverflow.com/a/31564389/1467802

当前代码：

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container-fluid">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img data-src="http://placehold.it/5000x1000">
      </div>
      <div class="item lazy-load"> <!-- here I add the new lazy load class -->
        <img -src="http://placehold.it/5001x1000">
      </div>
      <div class="item lazy-load"> <!-- here I add the new lazy load class -->
        <img data-src="http://placehold.it/5002x1000">
      </div>
      <div class="item lazy-load"> <!-- here I add the new lazy load class -->
        <img data-src="http://placehold.it/5003x1000">
      </div>
      <div class="item" lazy-load"> <!-- here I add the new lazy load class -->
        <img data-src="http://placehold.it/5004x1000">
      </div>
    </div>

  </div>

</div>

的Javascript

var cHeight = 0;

$('#carousel-example-generic').on('slide.bs.carousel', function(e) {

  var $nextImage = $(e.relatedTarget).find('img');

  $activeItem = $('.active.item', this);

  // prevents the slide decrease in height
  if (cHeight == 0) {
    cHeight = $(this).height();
    $activeItem.next('.item').height(cHeight);
  }

  // prevents the loaded image if it is already loaded
  // here this is where I don't know how to change the code and would like to target the class I introduced
  var src = $nextImage.data('lazy-load-src');

  if (typeof src !== "undefined" && src != "") {
    $nextImage.attr('src', src)
    $nextImage.data('lazy-load-src', '');
  }
});

Answer 1

如果我理解正确 - 导致您头痛的第三方模块 responsive.io

但它揭示了一个有趣的方法：https://responsive.io/docs#refresh-after-page-load

特别是对于你的情况，Responsive.io有一个刷新方法，当你将新图像添加到标记时通知它（我认为它与延迟加载的概念完全相关）。

试试这个javascript：

var cHeight = 0;

$('#carousel-example-generic').on('slide.bs.carousel', function(e) {

  var $nextImage = $(e.relatedTarget).find('img');

  $activeItem = $('.active.item', this);

  // prevents the slide decrease in height
  if (cHeight == 0) {
    cHeight = $(this).height();
    $activeItem.next('.item').height(cHeight);
  }

  // prevents the loaded image if it is already loaded
  var src = $nextImage.data('lazy-load-src');

  if (typeof src !== "undefined" && src != "") {

    // minor tweaks here: lazy-load-src > data-src
    $nextImage.data('lazy-load-src', '');
    $nextImage.data('data-src',      src);

    // inform ResponsiveIO about changes on your page
    ResponsiveIO.refresh($nextImage[0]);
  }
});

HTML将是：

<!-- Don't forget to include responcive.io for your test ^ ^ -->

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <div class="item active">
        <div class="item">
            <img data-lasy-load="http://placeholdit.imgix.net/~text?txtsize=250&txt=1&w=5000&h=1000" />
        </div>
        <div class="item">
            <img data-lasy-load="http://placeholdit.imgix.net/~text?txtsize=250&txt=2&w=5000&h=1000" />
        </div>
        <div class="item">
            <img data-lasy-load="http://placeholdit.imgix.net/~text?txtsize=250&txt=3&w=5000&h=1000" />
        </div>
    </div>
</div>

这是一个愚蠢的概念。告诉它是否无效。

Answer 2

这是最终代码，经过一段时间后，上面的代码无效，直到我发现错误（=> $nextImage.attr而不是.data）。在这里，您可以在我的网站详细故事视图中看到该演示。

    /*lazy slide*/

    var cHeight = 0;

    $('#carousel-example-generic').on('slide.bs.carousel', function(e) {

      var $nextImage = $(e.relatedTarget).find('img');

      $activeItem = $('.active.item', this);

      // prevents the slide decrease in height
      if (cHeight == 0) {
        cHeight = $(this).height();
        $activeItem.next('.item').height(cHeight);
      }

      // prevents the loaded image if it is already loaded
      //var src = $nextImage.data('lazy-load-src');
      var src = $nextImage.attr('lazy-load-src');

      if (typeof src !== "undefined" && src != "") {

        // minor tweaks here: lazy-load-src > data-src
        $nextImage.attr('lazy-load-src', '');
        $nextImage.attr('data-src',      src);
        //$nextImage.attr('src',src);
        // inform ResponsiveIO about changes on your page
        ResponsiveIO.refresh($nextImage[0]);
      }
    });

延迟加载bootstrap轮播而不更改img src属性

2 个答案: