之前，小千写了一篇《图片懒加载效果，只要一句代码就行了》图片预加载效果。但是，在我们仿站、建站、做站的过程中，难免会遇到客户，遇到老板的各种需求。
比如：一张图片，怎么电脑。笔记本、平板、手机端自适应，这点真的是难倒一槽人。下面，小千博客给大家出教程，和图片懒加载一样，只需要一句代码就能轻松自适应四端。
<!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>
对的，没错，这个代码，呃，就是这么简单，没有沉淀不需要敷衍。无加载、无过滤、无沉淀、毫无破绽，小千原创，代码简单，眼光毒辣，技术精湛，看到这个代码，搞前端的技术仔嘛，就能看出一种一般人都曾想不出来的东西。
还是那句话，关注小千网站，把网站加入收藏，小千会不定期的更新，在小千博客分享各种精湛的代码技术。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）