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 :
Mon css :
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) :
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 :
et la fonction en :
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 :
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)
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)