Maison > Article > interface Web > 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é :
<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 为了避免无限死循环需要这样置空 } */ }
<img src="http:/xxxx.png" onerror='this.src="../../static/xxx/xxx/head.png" />//这就ok了
<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 为了避免无限死循环需要这样置空 } */ }
<img src="http:/xxxx.png" onerror='this.src="../../static/xxx/xxx/head.png" />//这就ok了
Recommandations associées :
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!