Méthode d'implémentation de chargement d'images de manière asynchrone via js

Cet article partage principalement avec vous la méthode d'implémentation du chargement asynchrone des images via js Compte tenu principalement des limitations du réseau, pour une meilleure expérience utilisateur, la méthode de chargement et d'affichage asynchrone est utilisée pour charger les images pour img, et le le code est directement collé :

Tag:

<img onload="getHead(this,url);" src="../../static/xxx/xxx/head.png" >
<%--这里注意1,src写在 onload后面2,请给src一个默认的图片路径,不能直接src=""--%>

js:

function getHead(obj,portraitUrl){
    //模拟网络延迟请求
     setTimeout(function (){   
     obj.src=../../static/xxx/xxx/add.png;               
    },1000+Math.random()*5000);

   /*
    $.ajax({        type: "get",
        url: portraitUrl,
        async: true,
        success: function (portrait) {
           obj.src=portrait;
            portraitUrl.onload=null;//这里每次给obj的src赋值后都会执行onload 为了避免无限死循环需要这样置空
        }
*/
}

Et ce qui précède sont toutes les séquelles d'une écriture excessive sur Android. n'est pas nécessaire de se donner autant de mal. Je suis fou. Écrivez un ajax, veuillez voir ci-dessous :

<img src="http:/xxxx.png" onerror=&#39;this.src="../../static/xxx/xxx/head.png" />//这就ok了

Considérant principalement les limitations du réseau, pour une meilleure expérience utilisateur, le chargement et l'affichage asynchrones. La méthode est utilisée pour charger des images pour img et coller le code directement :
Tag:

<img onload="getHead(this,url);" src="../../static/xxx/xxx/head.png" >
<%--这里注意1,src写在 onload后面2,请给src一个默认的图片路径,不能直接src=""--%>

js:

function getHead(obj,portraitUrl){
    //模拟网络延迟请求
     setTimeout(function (){   
     obj.src=../../static/xxx/xxx/add.png;               
    },1000+Math.random()*5000);

   /*
    $.ajax({        type: "get",
        url: portraitUrl,
        async: true,
        success: function (portrait) {
           obj.src=portrait;
            portraitUrl.onload=null;//这里每次给obj的src赋值后都会执行onload 为了避免无限死循环需要这样置空
        }
*/
}

Et ce qui précède sont toutes les séquelles de trop Écriture Android. Il n'est absolument pas nécessaire de se donner de tels problèmes. Je suis fou et j'écris moi-même en ajax. Veuillez consulter tout ce qui suit :

<img src="http:/xxxx.png" onerror=&#39;this.src="../../static/xxx/xxx/head.png" />//这就ok了

Recommandations associées :

js. pour implémenter le préchargement des images (opération js attribut d'objet image terminé, chargement asynchrone des images par événement) _compétences javascript

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!