Manipulation de l'Img Src en fonction de la taille de l'écran
Bonjour,
j'essaye d'adapter la taille des images chargées en fonction de la taille de l'écran pour sauver des octets. Pour ce faire, j'utilise JQuery. J'ai déjà la taille de l'écran dans une variable. Voici mon code qui bien sur ne fonctionne pas (hehe sinon j'aurais pas posté ^^):
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| /* Change img src */
$(document).ready(function() {
function imageresize() {
if (WinHeight < '400'){
var SizePosition = $('.photo').attr('src').search("600"|"900");
var url1 = $('.photo').attr('src').str.substring(1,SizePosition);
var url2 = $('.photo').attr('src').str.substring((SizePosition+3));
$('photo').each(function(index) {
$('.photo').attr('src',url1+'300'+url2);
});
} else if (WinHeight > '400' && WinHeight < '850') {
var SizePosition = $('.photo').attr('src').search("300"|"900");
var url1 = $('.photo').attr('src').str.substring(1,SizePosition);
var url2 = $('.photo').attr('src').str.substring((SizePosition+3));
$('photo').each(function(index) {
$('.photo').attr('src',url1+'600'+url2);
});
} else if (WinHeight > '850') {
var SizePosition = $('.photo').attr('src').search("300"|"600");
var url1 = $('.photo').attr('src').str.substring(1,SizePosition);
var url2 = $('.photo').attr('src').str.substring((SizePosition+3));
$('photo').each(function(index) {
$('.photo').attr('src',url1+'900'+url2);
});
}
}
imageresize();//Triggers when document first loads
$(window).bind("resize", function(){//Adjusts image when browser resized
imageresize();
});
}); |
Je ne sais pas trop si on peut utiliser les regex dans la fonction search de JS ni si on le fait comme je l'ai fait...J'aurais bien voulu avoir votre aide! Merci bien!
