asked on

Change img src= to img data-src=

Question: Is there a js that will change img src= to img data-src=?

I'm going use the "Lazy Load Bootstrap Carousel Images" script referenced here: http://bulkan-evcimen.com/lazy_load_bootstrap_carousel_images.html (I've tried using preload carousel and preload image scripts but nothing seems to do the trick.)

Here's a sample link to one of my pages. Click on any of the thumbs and you'll probably see my modal/carousel load issue: http://ikonltd.com/artists/warhol/

The script requires that you use data-src= for your images in the carousel instead of src=

My thumbnails are being generated dynamically and it appears that they need to use data-src instead of src because I'm using those same images to populate my bootstrap carousel.

HTML for lazy load:

<!-- Button to trigger modal -->
<a href="#lazycarouselmodal" role="button" class="btn" data-toggle="modal">Launch lazy carousel</a>
 
<!-- Modal -->
<div id="lazycarouselmodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Lazy Carousel</h3>
  </div>
  <div class="modal-body">
      <div id="ajaxloader">
         <h4> loading images please wait </h4>
         <img src="http://i.imgur.com/m1fR7ef.gif"></img>
      </div> 
    <div id="lazycarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#lazycarousel" data-slide-to="0" class="active"></li>
    <li data-target="#lazycarousel" data-slide-to="1"></li>
    <li data-target="#lazycarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img data-src="http://24.media.tumblr.com/b273172b94f360682fe9d9b5b78ad672/tumblr_mr80a1mhlR1st5lhmo1_1280.jpg"/>
    </div>
    <div class="item">
        <img data-src="http://24.media.tumblr.com/408fbfeae2d8590512b9fc9cc6207090/tumblr_mr807bH7hh1st5lhmo1_1280.jpg"/>
    </div>
    <div class="item">
        <img data-src="http://31.media.tumblr.com/11d494e09d78f3979af67e256862e85b/tumblr_mr80f71qQe1st5lhmo1_1280.jpg"/>
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#lazycarousel" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#lazycarousel" data-slide="next">›</a>
</div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

Open in new window

Javascript for lazy load:

$('div.modal').on('show', function(e){
    var carousel = $(this).find('.carousel').hide();
    var deferreds = [];
    var imgs = $('.carousel', this).find('img');
    // loop over each img
    imgs.each(function(){
        var self = $(this);
        var datasrc = self.attr('data-src');
        if (datasrc) {
            var d = $.Deferred();
            self.one('load', d.resolve)
                .attr("src", datasrc)
                .attr('data-src', '');
            deferreds.push(d.promise());
        }
    });

    $.when.apply($, deferreds).done(function(){
        $('#ajaxloader').hide();
        carousel.fadeIn(1000);
    });
});

Open in new window

SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

phillystyle123

ASKER

Thanks for looking at the code. I will clean it up. I see the 2 separate jquery mobile scripts and that respond.js is actually an html file. I believe I'm using respond.js for ie issues? been so long since i started this project i honestly don't remember.

any idea how to pull off what I'm asking for in my question?

leakim971

Once you clean up you code :

jQuery(window).load(function() {
     jQuery('.carousel', this).find('img').each(function(i, v) {
          var src = jQuery(this).attr("src");
          alert(src); // remove this line if the script work fine
          jQuery(this).data("src", src);
     });
});

Open in new window

phillystyle123

ASKER

thanks leakim971 - is this js to switch src to data-src?

leakim971

jQuery(window).load(function() { // wait for complete page loading with image
     jQuery('.carousel', this).find('img').each(function(i, v) { // for each image inside the carousel (the element with .carousel class)
          var src = jQuery(this).attr("src"); // put the src value for each image in variable
          alert(src); // remove this line if the script work fine 
          jQuery(this).data("src", src); // put this src value inside data-src
     });
});

Open in new window

phillystyle123

ASKER

I'm not getting this. I need this image in my carousel where the images are dynamically generated to change from this:

<img src="http://ikonltd.com/images/lg/basquiat_untitled-figure.jpg" class="thumbnail img-responsive pull-left lazy" border="0">

to this:

<img data-src="http://ikonltd.com/images/lg/basquiat_untitled-figure.jpg" class="thumbnail img-responsive pull-left lazy" border="0">

I've got your script in the header but i'm still seeing "img src=" and I need img data-src=

<script type="text/javascript">
jQuery(window).load(function() { // wait for complete page loading with image
jQuery('.carousel', this).find('img').each(function(i, v) { // for each image inside the carousel (the element with .carousel class)
var src = jQuery(this).attr("src"); // put the src value for each image in variable
alert(src); // remove this line if the script work fine
jQuery(this).data("src", src); // put this src value inside data-src
});
});

</script>

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

phillystyle123

ASKER

leakim971 - this works perfectly! Thanks so much. Something I just noticed - the lazyload script requires the 1st image to use src instead of data-src. So, the image that is contained in the .active class would just use src.

<div class="active"><img data-src="img.jpg">

needs to be

<div class="active"><img src="img.jpg">

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

phillystyle123

ASKER

Thanks for the help with the script and with the clean up -much appreciated!