之前，小千写了一篇《图片懒加载效果，只要一句代码就行了》图片预加载效果。但是，在我们仿站、建站、做站的过程中，难免会遇到客户，遇到老板的各种需求。
比如：一张图片，怎么电脑。笔记本、平板、手机端自适应，这点真的是难倒一槽人。下面，小千博客给大家出教程，和图片懒加载一样，只需要一句代码就能轻松自适应四端。
HTML
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>全民博客 - 小千原创作品</title>
- <script type="text/javascript" src="http://nidecms.com/ueditor/jquery.min.js"></script>
- </head>
- <body>
- <div class="pic" PC="http://nidecms.com/uploads/alli/20230721/1689891326684833.png" NOTE="http://nidecms.com/uploads/alli/20230721/1689891326684833.png" PAD="http://nidecms.com/uploads/alli/20231124/1700781248560192.png" PHONE="http://nidecms.com/uploads/alli/20231124/1700781248560192.png" IMGALT="全民博客">
- <img src="http://nidecms.com/ueditor/asking/img/load.svg" alt="小千原创作品">
- <!--<div class="pic" PC="电脑端访问时显示的图片" NOTE="笔记本访问时显示的图片" PAD="平板访问时显示的图片" PHONE="手机端访问时显示的图片" IMGALT="这里是图片ALT标签">
- <img src="写个懒加载图片" alt="这里的ALT会被IMGALT替换">-->
- </div>
- <script type="text/javascript">
- var www = $(window).width();
- $('.pic').each(function() {
- if (www > 1024) {
- img_src = $(this).attr('PC');//电脑端显示图片
- } else if (www >= 992) {
- img_src = $(this).attr('NOTE');//笔记本显示图片
- } else if (www >= 768) {
- img_src = $(this).attr('PAD');//平板显示图片
- } else {
- img_src = $(this).attr('PHONE');//手机端显示图片
- }
- let img_alt = $(this).attr('IMGALT');//alt标签显示图片
- $(this).find('img').attr('src', img_src);
- $(this).find('img').attr('alt', img_alt);
- });
- </script>
- </body>
- </html>
对的，没错，这个代码，呃，就是这么简单，没有沉淀不需要敷衍。无加载、无过滤、无沉淀、毫无破绽，小千原创，代码简单，眼光毒辣，技术精湛，看到这个代码，搞前端的技术仔嘛，就能看出一种一般人都曾想不出来的东西。
还是那句话，关注小千网站，把网站加入收藏，小千会不定期的更新，在小千博客分享各种精湛的代码技术。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）