<img src="">标签通过js异步加载图片

本文介绍了一种使用异步加载技术来优化图片加载过程的方法,通过预设默认图片并在加载完成后替换为实际图片的方式,提高了网页加载速度及用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要是考虑到网络的限制,为了更好的用户体验,采用异步加载显示的方法为img加载图片,直接贴代码:
标签:

<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 为了避免无限死循环需要这样置空
        }
*/
}

然后上面都是Android写多了的后遗症,完全没必要这么麻烦啊,脑抽了啊自己写个ajax,所有请看下面:

<img src="http:/xxxx.png" onerror='this.src="../../static/xxx/xxx/head.png" />
//这就ok了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>甜蜜约会</title> </head> <link rel="stylesheet" href="../css/Untitled-2.css" type="text/css"/> <script type="text/javascript" src="../js/Untitled-3.js"></script> <body> <div class="head"> <div class="left"><img src="../images1/logo.png" /></div> <div class="right"><img src="../images1/phone.jpg"/></div> </div> <div id="nav"> <ul class="nav"> <li><a href="#" class="color_in">首页</a></li> <li><a href="#">港式甜品</a></li> <li><a href="#">台式甜品</a></li> <li><a href="#">植物甜品</a></li> <li><a href="#">广府糖水</a></li> <li><a href="#">加盟我们</a></li> <li><a href="#">分店地址</a></li> </ul> </div> <div class="banner"> <ul class="banner_pic" id="banner_pic"> <li class="current"><img src="../images1/01.jpg" /></li> <li class="pic"><img class="one" src="../images1/02.jpg" /></li> <li class="pic"><img class="one" src="../images1/03.jpg"/></li> </ul> <ol id="button"> <li class="current"></li> <li class="but"></li> <li class="but"></li> </ol> </div> <div id="learn"> <h2>甜蜜约会品牌简介</h2> <dl> <dt></dt> <dd class="tex1">想和甜蜜有个约会吗?</dd> <dd class="tex2">甜品不仅女孩子喜欢,不少男孩子也不例外,在人们越来越会享受生活的今天,甜品品牌可谓风升水起,“甜蜜约会就是其中一个。”</dd> </dl> <div class="imgbox" id="imgbox"> <span> <a href="#"><img src="../images1/1.jpg"/></a> <a href="#"><img src="../images1/2.jpg"/></a> <a href="#"><img src="../images1/3.jpg"/></a> <a href="#"><img src="../images1/4.jpg"/></a> </span> </div> </div> <div id="features"> <h2>甜蜜约会特色美食推荐</h2> <div class="list0"> <div id="SwitchBigPic"> <span class="sp"><a href="#" ><img src="../images1/111.jpg" /></a></span> <span><a href="#"><img src="../images1/222.jpg" /></a></span> <span><a href="#"><img src="../images1/333.jpg" /></a></span></div> <ul id="SwitchNav"> <li><a class="txt_img1" href="#"></a></li> <li><a class="txt_img2" href="#"></a></li> <li><a class="txt_img3" href="#"></a></li> </ul> </div> <div class="list1"> <h3></h3> <form action="#" method="post" class="biaodan"> <table class="content"> <tr> <td class="left">姓名:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left">手机:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left">邮箱:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left"></td> <td> <select class="course"> <option>请选择最近店铺地址</option> <option> 北京三里屯</option> <option>上海南京路3号</option> <option>广州淮阳路12号</option> <option>深圳大都会3号/</option> </select> </td> </tr> <tr> <td colspan="2"><input class="no_border" type="button" /></td> </tr> </table> </form> </div> </div> <div class="footer">甜蜜约会版权所有2020 - 2036 京 ICP 备 2232333 号  京公网安备 2342434324343</div> </body> </html>代码分析
最新发布
06-21
<html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> <meta http-equiv="Expires" content="0"> <title>新阕通信报价单</title> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/bootstrap/css/default.css"> <script src="/js/jquery-1.11.3.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> <script src="/bootstrap/js/bootstrap3-typeahead.min.js"></script> <script src="/js/jquery.form.js"></script> <script src="/js/b2b.js"></script> <script src="/js/watermark.js"></script> <!--[if lte IE 8]> <link rel="stylesheet" href="/bootstrap/css/ie8hack.css"> <![endif]--> <!--[if lt IE 9]> <script src="/js/html5shiv.min.js"></script> <script src="/js/respond.min.js"></script> <![endif]--> <style> .nav > li > .tt { padding: 5px; } .nav-pills > li > a { border-radius: 4px;margin:5px 0px; } .text-center{vertical-align: middle;} </style> </head> <body class="ty_body" style="padding-bottom: 70px;"> <div class="container-fluid"> <div class="top_nav"> <nav class="navbar navbar-default topnavbar " style="margin:0px;"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href=""><img src="http://b2bimage.139erp.com/161234459505651070b2blogo.png?r=998363"></a> <span class="logo_bg"></span> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="nav_center"> <h4>新阕通信</h4> <div class="dropdown zxqq" style="display: none;"> <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> 在线客服 <span class="caret"></span> </a> <ul class="dropdown-menu qq-menu" r
03-30
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值