Deux solutions JavaScript pour l'adaptation d'images dans les compétences Web_javascript mobiles

Cet article parle principalement des solutions à deux situations courantes : l'affichage central adaptatif des images sur le Web en fonction de la taille de l'écran du téléphone mobile, et l'adaptation adaptative des images. Commençons
Lorsque je travaillais sur une page Web wap qui fonctionne avec des clients mobiles, j'ai découvert qu'il existe deux situations particulièrement importantes dans lesquelles les articles nécessitent l'affichage d'images. L'une concerne les atlas. Ce type d'article ne doit être parcouru qu'en balayant vers la gauche et la droite. L'expérience consiste à faire zoomer et afficher les images dans la plage effective de l'écran, cela évite à l'utilisateur d'avoir à faire glisser son doigt pour déplacer l'image afin de la visualiser car elle est trop grande, ce qui réduit considérablement l'expérience utilisateur. La seconde concerne les articles contenant des graphiques et du texte mixtes. La largeur maximale de l'image ne dépasse pas la largeur de l'écran et la hauteur peut être automatique. Les deux situations sont courantes dans les projets. De plus, certaines personnes parlent de créer un outil de découpe d'image et de définir le rapport de taille d'image à une taille unifiée, mais malgré cela, face à des écrans d'appareils mobiles de différentes tailles, il est impossible d'appliquer une solution unifiée. Et s’il y a trop de demandes, combien d’images de tailles différentes doivent être stockées sur le serveur ? L'affichage n'est pas très réaliste.

Voici le type d'album. Le demandeur exige que la hauteur et la largeur des images soient conservées dans le champ de vision du téléphone mobile. Le code js est répertorié ci-dessous :

.

<script type="text/javascript"> 
$(function(){ 
 
var imglist =document.getElementsByTagName("img"); 
//安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系统支持 
/* 
var _width = window.screen.width; 
var _height = window.screen.height - 20; 
 
var _width = document.body.clientWidth; 
var _height = document.body.clientHeight - 20; 
*/ 
var _width,  
  _height; 
doDraw(); 
 
window.onresize = function(){ 
  doDraw(); 
} 
 
function doDraw(){ 
  _width = window.innerWidth; 
  _height = window.innerHeight - 20; 
  for( var i = 0, len = imglist.length; i < len; i++){ 
    DrawImage(imglist[i],_width,_height); 
  } 
} 
 
function DrawImage(ImgD,_width,_height){  
  var image=new Image();  
  image.src=ImgD.src;  
  image.onload = function(){ 
    if(image.width>30 && image.height>30){  
    
      if(image.width/image.height>= _width/_height){  
        if(image.width>_width){ 
          ImgD.width=_width;  
          ImgD.height=(image.height*_width)/image.width;  
        }else{  
          ImgD.width=image.width;  
          ImgD.height=image.height;  
        }  
      }else{  
        if(image.height>_height){ 
          ImgD.height=_height;  
          ImgD.width=(image.width*_height)/image.height;  
        }else{  
          ImgD.width=image.width;  
          ImgD.height=image.height;  
        }  
      } 
    }   
  } 
 
} 
   
}) 
</script> 

Remarque : lors du test, il a été constaté que le système Android 4.0 ne prend pas bien en charge la propriété window.screen.width. Dans de nombreux cas, les pixels de l'écran renvoyés lors du premier chargement sont incorrects. Mon système Android 2.3.3 a réussi le test et prend en charge cet attribut. On dit qu'il s'agit d'un bug du système Android, et ce problème peut être résolu en définissant le délai via setTimeout. Cependant, cette méthode ne fonctionne pas, quelle que soit la manière dont je la teste. Alors autant trouver une autre solution. J'ai trouvé que window.innerWidth pouvait assumer cette tâche importante, et aucun problème de compatibilité n'a été trouvé, d'accord.

Ce qui suit est le deuxième cas, un type d'article avec des images et des textes. À l'heure actuelle, seules la largeur de l'image et la largeur du téléphone mobile sont requises, et il n'y a aucune limite sur la hauteur, ce qui est relativement simple.
Transformez le code javascript ci-dessus comme suit :

<script type="text/javascript"> 
$(function(){ 
var imglist =document.getElementsByTagName("img"); 
//安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系统支持 
var _width; 
doDraw(); 
 
window.onresize = function(){ 
  //捕捉屏幕窗口变化，始终保证图片根据屏幕宽度合理显示 
  doDraw(); 
} 
 
function doDraw(){ 
  _width = window.innerWidth; 
  for( var i = 0, len = imglist.length; i < len; i++){ 
    DrawImage(imglist[i],_width); 
  } 
} 
 
function DrawImage(ImgD,_width){  
  var image=new Image();  
  image.src=ImgD.src;  
  image.onload = function(){ 
    //限制，只对宽高都大于30的图片做显示处理 
    if(image.width>30 && image.height>30){  
      if(image.width>_width){ 
        ImgD.width=_width;  
        ImgD.height=(image.height*_width)/image.width;  
      }else{  
        ImgD.width=image.width;  
        ImgD.height=image.height;  
      }  
 
    }   
  } 
 
} 
   
}) 
</script> 

Remarque : la fonction de redimensionnement dans le code capture les modifications dans la fenêtre de l'écran et garantit toujours que l'image est affichée raisonnablement en fonction de la largeur de l'écran. Bien sûr, le principe est que comme mon projet, l'article est directement au format texte enrichi et la balise parent de l'image a défini l'attribut de centrage de text-align:center. Si le contenu de votre article fait directement appel à un tiers, vous pouvez alors ajouter l'instruction de traitement correspondante au code javascript ci-dessus.