title: Lazy load bootstrap carousel without changing img src attribute
body: <p>I want to lazy load the images loaded in my bootstrap 3 carousel.
  I found a <a href="https://stackoverflow.com/a/31564389/1467802">pretty good solution</a> but the problem is that all are relying on changing <code>&lt;img src=...&gt;</code> to <code>&lt;img data-lazy-load-src=...&gt;</code> but I can't do that as I need these " src" to all remain called "src" because of very deep third party responsive module rely on being able to read 'src' (and just precisely 'src', not ' data-lazy-load-src'.)</p>
  
  <p>So I would like to do the same as <a href="https://stackoverflow.com/a/31564389/1467802">this solution</a> but without introducing a new "data-lazy-load-src" src. Could I do the same by introducing just a class "lazy-load" or another data-target or similar... either on the div "item" or on the <code>&lt;img&gt;</code> directly?</p>
  
  <p>I don't know how to adjust the javascript to do that.</p>
  
  <p>Source: <a href="https://stackoverflow.com/a/31564389/1467802">https://stackoverflow.com/a/31564389/1467802</a></p>
  
  <p>CURRENT CODE:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container-fluid"&gt;
  
    &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="item active"&gt;
          &lt;img data-src="http://placehold.it/5000x1000"&gt;
        &lt;/div&gt;
        &lt;div class="item lazy-load"&gt; &lt;!-- here I add the new lazy load class --&gt;
          &lt;img -src="http://placehold.it/5001x1000"&gt;
        &lt;/div&gt;
        &lt;div class="item lazy-load"&gt; &lt;!-- here I add the new lazy load class --&gt;
          &lt;img data-src="http://placehold.it/5002x1000"&gt;
        &lt;/div&gt;
        &lt;div class="item lazy-load"&gt; &lt;!-- here I add the new lazy load class --&gt;
          &lt;img data-src="http://placehold.it/5003x1000"&gt;
        &lt;/div&gt;
        &lt;div class="item" lazy-load"&gt; &lt;!-- here I add the new lazy load class --&gt;
          &lt;img data-src="http://placehold.it/5004x1000"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>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" &amp;&amp; src != "") {
      $nextImage.attr('src', src)
      $nextImage.data('lazy-load-src', '');
    }
  });
  </code></pre>