图片由模糊变清楚
1 2 3 | < button id=btnLoad>load</ button > < button id=btnToggle style="display:none">toggle</ button > < img id=img src=https://d262ilb51hltx0.cloudfront.net/freeze/max/30/1*0oCBXtKSgMEbBlDbvwqC6w.png?q=20 data-src=https://d262ilb51hltx0.cloudfront.net/max/800/1*0oCBXtKSgMEbBlDbvwqC6w.png /> |
1 2 3 4 5 | img{ display : block ; width : 800px ; height : 443px ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | var src = img.src; var rawSrc = img.getAttribute( 'data-src' ); var loadImage = function (url, fn){ var _img = new Image(); _img.onload = function (){ fn( true ); }; _img.onerror = function (){ fn( false ); }; _img.src = url; }; btnLoad.onclick = function (){ btnLoad.textContent = 'loading' ; btnLoad.onclick = null ; btnLoad.disabled = true ; loadImage(rawSrc, function (success){ btnLoad.textContent = success ? 'load success' : 'load failed' ; btnToggle.style.display = '' ; img.src = rawSrc; }); } btnToggle.onclick = function (){ img.src = img.src === src ? rawSrc : src; }; |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步