Cet article présente principalement la méthode de chargement asynchrone des images ajax. Il analyse en détail les principes et les techniques de mise en œuvre associées du chargement asynchrone des images ajax sous forme d'exemples. Les amis dans le besoin peuvent se référer à ce qui suit
<.>Les exemples de cet article expliquent la méthode Ajax pour charger des images de manière asynchrone. Je le partage avec vous pour votre référence. Les détails sont les suivants : Les images sont généralement relativement volumineuses, elles sont donc chargées progressivement après le chargement de la page Web de base. L'ensemble du processus de chargement est très inesthétique, ou plutôt. passe progressivement du flou au flou, ou s'étend de haut en bas (bien sûr, vous pouvez aussi penser que ce sont de bons effets spéciaux). Si le remplacement dynamique de l'image est obtenu en modifiant régulièrement l'attribut src de l'img, le scintillement qui en résultera sera encore plus inacceptable. Ce n'est pas quelque chose qui peut être agréable avec l'attribut alt. Contactez la technologie AJAX populaire, connue sous le nom de « non » rafraîchissement, et utilisez l'objet XMLHttpRequest pour lancer une requête asynchrone. Une fois l'image chargée, elle est insérée dynamiquement dans la page HTML « de premier plan ». Il devrait être capable de répondre aux besoins, mais l'objet renvoyé par l'objet XMLHttpRequest n'a que deux attributs, ResponseXML et ResponseText, le premier est un objet XML et le second est le contenu en texte brut renvoyé. Il semble qu'il n'y ait pas de binaire. données nécessaires à l'image... En prenant du recul, même si cela peut être utilisé, responseText récupère les données binaires de l'image, comment peut-on les insérer en première page ? Remplacer l'attribut src de img par l'url demandée ? Faites-le et écrivez un code de diaporama d'images pour vérifier votre idée :<html> <head> <title>Image Slide</title> <script> function makeAsyncRequest(url, callback) { var httpRequest; if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest = new XMLHttpRequest(); if (httpRequest.overrideMimeType) { httpRequest.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } httpRequest.onreadystatechange = function () { if (httpRequest.readyState == 4 && httpRequest.status == 200) callback(url); }; httpRequest.open('GET', url, true); httpRequest.send(''); } var i = 0; var max_i = 10; function displayImage() { var url = "./" + i + ".jpg"; makeAsyncRequest(url, function (url) { var p = document.getElementById("image"); var img = p.getElementsByTagName("img"); if (img.length == 0) { img = document.createElement("img"); while (p.childNodes.length > 0) p.removeChild(p.childNodes[0]); p.appendChild(img); } else img = img.item(0); img.src = url; if (i == max_i) i = 0; else i ++; window.setTimeout("displayImage();", 1000); }); } </script> </head> <body onload="displayImage();"> <p id="image"> </p> </body> </html>
Utilisez l'objet XMLHttpRequest pour obtenir l'image du serveur, et mettez l'image en cache dans le tampon du navigateur local.
Récupérez l'image à partir du tampon du navigateur local pour l'afficher.
Étant donné que le temps entre la prise de la photo et son affichage dans la deuxième étape est très court, les utilisateurs ne peuvent pratiquement détecter aucun scintillement. On peut voir que la technologie ci-dessus est basée sur l'hypothèse que l'image demandée peut être mise en cache. Si l'image ne peut pas être mise en cache, le code ci-dessus ne fonctionnera-t-il pas correctement ?
function displayImage() { var url = "./" + i + ".jpg"; var url = "./image.php?filename=" + i + ".jpg"; makeAsyncRequest(url, function (url) { var p = document.getElementById("image"); var img = p.getElementsByTagName("img");
<?php header("Content-Type: image/jpeg"); header("Cache-Control: no-cache"); echo file_get_contents($_GET["filename"]); ?>
<html> <head> <title>Image Slide</title> <script> var i = 0; var max_i = 10; function displayImage() { var img = document.createElement("img"); img.onload = function () { var p = document.getElementById("image"); while (p.childNodes.length > 0) p.removeChild(p.childNodes[0]); p.appendChild(img); if (i == max_i) i = 0; else i ++; window.setTimeout("displayImage();", 1000); } img.src = "./" + i + ".jpg"; } </script> </head> <body onload="displayImage();"> <p id="image"> </p> </body> </html>
i ++; window.setTimeout("displayImage();", 1000); } img.src = "./" + i + ".jpg"; img.src = "./image.php?filename=" + i + ".jpg"; } </script> </head>
Implémentation de la file d'attente de requêtes AJAX
Un résumé de plusieurs méthodes de soumission de formulaires de manière asynchrone à l'aide d'Ajax
Comment résoudre le problème des tableaux dans les requêtes AJAX
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!