Optimisation Slider appel image data-src

Bonjour

J'essaye d'optimiser mon slider afin qu'il ne charge pas toutes les images d'un coup, mais au fur et à mesure en utilisant data-src.
Pour alléger le poids de la page, seule la première image serait chargée au début.
Je me debrouille en html/css/php mais mes compétences en javascript sont proches de peanuts...j'apprends tranquillou au fur et à mesure.

Mon code html initial est :

            <ul class="rslides">
                <li>
                    <img  title="" src="images/mon-image-1.JPG" alt="" width="1600" height="1200">
                </li>
                <li>
                    <img  title="" src="images/mon-image-2.JPG" alt="" width="1600" height="1200">
                </li>
                <li>
                    <img  title="" src="images/mon-image-3.JPG" alt="" width="1600" height="1200">
                </li>
                <li>
                    <img  title="" src="images/mon-image-4.JPG" alt="" width="1600" height="1200">
                </li>
            </ul>

Mon css :

        .rslides {
            position: relative;
            list-style: none;
            overflow: hidden;
            width: 100%;
            max-height: 612px;
            padding: 0;
            margin: auto
        }
        .rslides li {
            -webkit-backface-visibility: hidden;
            position: absolute;
            display: none;
            width: 100%;
            left: 0;
            top: 0
        }
        .rslides li:first-child {
            position: relative;
            display: block;
            float: left
        }
        .rslides img {
            display: block;
            height: auto;
            float: left;
            width: 100%;
            border: 0;
            border-radius: 3px;
        }

Le script du slider est visible ici : http://github.com/viljamis/ResponsiveSlides.js/blob/master/responsiveslides.js

Et la fonction (pas inline entre <script></script> mais placée après le script du slider dans mon fichier unique master.js en defer) :

jQuery(function() {
    jQuery(".rslides").responsiveSlides({
        auto: true,
        speed: 500,
        timeout: 4000,
        pager: false,
        nav: false,
        random: false,
        pause: false,
        pauseControls: true,
        prevText: "Previous",
        nextText: "Next",
        maxwidth: "1607",
        navContainer: "",
        manualControls: "",
        namespace: "rslides",
        before: function(){},
        after: function(){}
		)}
    });
})

Donc en premier j'ai essayé de bidouiller à l'aide de cet article : http://blog.nursit.net/slider-d-images-attention-au-temps-de-chargement.html

J'ai donc transformé mon html en :

            <ul class="rslides">
                <li>
                    <img  src="images/mon-image-1.JPG" title="" alt="" width="1600" height="1200">
                </li>
                <li>
                    <img  data-src="images/mon-image-2.JPG" title="" alt="" width="1600" height="1200">
                </li>
                <li>
                    <img  data-src="images/mon-image-3.JPG" title="" alt="" width="1600" height="1200">
                </li>
                <li>
                    <img  data-src="images/mon-image-4.JPG" title="" alt="" width="1600" height="1200">
                </li>
            </ul>

et la fonction en :

function sliderLoadNextImg(rslides){
       var toload = jQuery(".rslides img(.loaded)[data-src^=]",rslides);
       if (toload.length) { toload = toload.eq(0); toload.attr('src',toload.attr('data-src')).attr('data-src','').addClass('loaded');}
}
jQuery(window).load(function() {
    jQuery(".rslides").responsiveSlides({
        auto: true,
        speed: 500,
        timeout: 4000,
        pager: false,
        nav: false,
        random: false,
        pause: false,
        pauseControls: true,
        prevText: "Previous",
        nextText: "Next",
        maxwidth: "1607",
        navContainer: "",
        manualControls: "",
        namespace: "rslides",
        before: function(){}, //egalement en supprimant cette ligne
        after: function(){}, //egalement en supprimant cette ligne
	afterLoad: function(){
	sliderLoadNextImg(jQuery('.rslides')
	)},
	afterChange: function(){
	sliderLoadNextImg(jQuery('.rslides')
		)}
    });
})

Mais les images en data-src ne se chargent pas.
Seule la première image en src sans l'attribut data se charge.
Le slider fonctionne cependant, on voit le contenu textuel des trois images non chargées.
Problème : Je n'arrive pas à me debuguer, pas d'erreurs javascript sur la console.

J'ai donc essayé un autre code similaire, trouvé ici : http://wpquestions.com/question/showChrono/id/7959 deuxième réponse

ce qui me donnait :

jQuery(document).ready(function(rslides){
	var slidesImages = jQuery('rs.slides img');
	function loadMyImage(i){
		var image = slidesImages.eq(i),
			image_src = image.attr('data-src');
		rslides('<img >').load(function(){
			// remove data-src, set image src, fade it and start to load other image
			image.removeAttr('data-src');
			image.attr('src',image_src);
			if(i<slidesImages.length)
				loadMyImage(i+1);
		}).attr('src',image_src);
	}
	// start load first image
	loadMyImage(0);
});
jQuery(function() {
    jQuery(".rslides").responsiveSlides({
        auto: true,
        speed: 500,
        timeout: 4000,
        pager: false,
        nav: false,
        random: false,
        pause: false,
        pauseControls: true,
        prevText: "Previous",
        nextText: "Next",
        maxwidth: "1607",
        navContainer: "",
        manualControls: "",
        namespace: "rslides",
  before: function(){},
  after: function(){},

    });
})

Mais exactement le même résultat, pas d'erreurs sur firebug mais pas de chargement.

Ce qui me fait dire que je dois faire une belle boulette....

Merci de votre aide.
Modifié par -Tony- (22 Oct 2015 - 17:15)