正在读取数据,页面载入中,请稍后...

前端图片延迟加载效果,全网最牛哔的图片懒加载

之前,小千写了一篇《图片懒加载效果,只要一句代码就行了》图片预加载效果。但是,在我们仿站、建站、做站的过程中,难免会遇到客户,遇到老板的各种需求。

比如:一张图片,怎么电脑。笔记本、平板、手机端自适应,这点真的是难倒一槽人。下面,小千博客给大家出教程,和图片懒加载一样,只需要一句代码就能轻松自适应四端。

<!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>

对的,没错,这个代码,呃,就是这么简单,没有沉淀不需要敷衍。无加载、无过滤、无沉淀、毫无破绽,小千原创,代码简单,眼光毒辣,技术精湛,看到这个代码,搞前端的技术仔嘛,就能看出一种一般人都曾想不出来的东西。

前端图片延迟加载效果,全网最牛哔的图片懒加载 - 全民博客

还是那句话,关注小千网站,把网站加入收藏,小千会不定期的更新,在小千博客分享各种精湛的代码技术。

本文结束

评论专区

发表评论

评论列表(无评论)