Javascript 不更改img src属性的延迟加载引导转盘

我想延迟加载加载到我的引导3旋转木马中的图像。 我发现了一个问题，但问题是所有人都依赖于将

更改为

，但我无法做到这一点，因为我需要这些“src”保持称为“src”，因为非常深的第三方响应模块依赖于能够读取“src”（准确地说是“src”，而不是“数据延迟加载src”）

因此，我想做与相同的事情，但不引入新的“数据延迟加载src”src。我可以通过引入一个类“延迟加载”或另一个数据目标或类似的方法来实现同样的功能吗。。。是直接在div“item”上还是直接在

上

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

资料来源：

当前代码：

html

---

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

但它揭示了一个有趣的方法：

特别是对于您的情况，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
  // 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', '');
  }
});

HTML将是：

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]);
  }
});

---

这是赤裸裸的概念。告诉我它是否工作。

如果我理解正确-导致您头痛的第三方模块是有响应的。io

但它揭示了一个有趣的方法：

特别是对于您的情况，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
  // 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', '');
  }
});

HTML将是：

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]);
  }
});

---

这是赤裸裸的概念。告诉我它是否不起作用。

这是最后的代码，在卡住一段时间后，上面的代码不起作用，直到我发现错误（

=>$nextImage.attr

not

.data

）。在这里，您可以在我的网站详细故事视图中看到演示

<!-- 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>

---

这是最后的代码，在被卡住了一段时间后，您上面的代码没有工作，直到我发现错误（

=>$nextImage.attr

not

.data

）。在这里，您可以在我的网站详细故事视图中看到演示

<!-- 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>

---

我想我明白了，但我想确定一下。您不能删除属性

src

？如果是这样的话，据我所知，一旦图像具有属性

src

，它就不会延迟加载，因为浏览器会立即开始下载图像。嗨，与之不同，我想找到一个解决方案，我不会写延迟加载src bn，因为我无法改变它保持“data src=”的方式（我使用responsive.io，需要它来识别数据src）. 我已经更新了代码，使其更精确/为所有图像编写“data src”所需的速度（由于responsive.io）使我无法使用解决方案stackoverflow.com/a/31564389/1467802，我不知道如何实现这一点。我觉得我现在不明白一些事情。responsive.io与您的案例有什么关系？是“深层第三方模块”吗？我想我理解，但我想确定一下。您不能删除属性

src

？如果是这样的话，据我所知，一旦图像具有属性

src

，它就不会延迟加载，因为浏览器会立即开始下载图像。嗨，与之不同，我想找到一个解决方案，我不会写延迟加载src bn，因为我无法改变它保持“data src=”的方式（我使用responsive.io，需要它来识别数据src）. 我已经更新了代码，使其更精确/为所有图像编写“data src”所需的速度（由于responsive.io）使我无法使用解决方案stackoverflow.com/a/31564389/1467802，我不知道如何实现这一点。我觉得我现在不明白一些事情。responsive.io与您的案例有什么关系？是“深度第三方模块”吗？非常感谢。自从发布这个问题以来，我已经进步了很多，但是你的解决方案似乎有效。你可以在我的网站上看到演示>>哪个网站？我从上面的代码中裁剪了一些东西：1。响应总是返回404。2.高度设置不是必需的，因为下一幅图像的问题高度你们不知道它的高度是多少，我用默认的css容器最小高度替换高度设置。看他们看详细的文章谢谢。自从发布这个问题以来，我已经进步了很多，但是你的解决方案似乎有效。你可以在我的网站上看到演示>>哪个网站？我从上面的代码中裁剪了一些东西：1。响应总是返回404。2.高度设置不是必需的，因为下一幅图像的问题高度你们不知道它的高度是多少，我用默认的css容器最小高度替换高度设置。查看他们查看文章的详细信息