前端图片懒加载+按需加载范例

最新推荐文章于 2024-05-30 17:38:42 发布
最新推荐文章于 2024-05-30 17:38:42 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taotaobaobei/article/details/85256239
版权

需要的依赖 jquery.js、jquery.lazyload.js

项目结构：

|------app

|------|--------js

|-----|------jquery.js

|-----|-----jquery.lazyload.js

|----index.html

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.lazyload.js"></script>
    <script src="js/index.js"></script>
<body>
<!--页面容器-->
  <div class="index-content">
    <div class="banner">
        <img src="img/banner.jpg">
    </div>
    <div class="index-main">
      <p>商品秒杀</p>
      <ul>
        <!--<li class="lists">
            <img src="img/1.jpg" width="150" height="150">
            <label>
                <b class="discount">￥ 329</b>
                <span class="price-text">￥ 379</span> 
            </label>            
        </li>-->
    </ul>  
    </div>
  </div>
</body>
</html>

$(function(){
    //第一种方式  第三方插件实现
    // $.ajax({
    //     type:'get',
    //     url:'http://127.0.0.1:3333/home',
    //     dataType:'json',
    //     success:function(res){
    //         console.log(res);
    //         if(res.length>0){
    //             $.each(res,function(index,item){
    //                 $(".index-main ul").append('<li class="lists"> '+
    //                     '<img data-original="'+item.product_img_url+'" src="img/loading.gif" width="150" height="150">'+
    //                     '<label>'+
    //                         '<b class="discount">'+item.product_uprice+'</b>'+
    //                         '<span class="price-text">'+item.product_price+'</span> '+
    //                     '</label>  '+          
    //                 '</li>')
    //             })
    //         };
    //         //懒加载
    //          $(".index-main ul img").lazyload({
    //              effect:'fadeIn'     //淡入效果
    //          })
    //     },
    //     error:function(error){
    //         console.log(error);
    //     }
    // });
    imgList();
    //第二种方式  
    $(window).scroll(function(){
        //滚动条与顶部的距离
        var scrollTop = Math.ceil($(this).scrollTop());
        //当前可视区域的高
        var h = $(this).height();
        //页面的总高度
        var top = $(document).height();
       // console.log(scrollTop);
        if(scrollTop + h >= top) {   //滚动条触底   
            imgList();
        }

    })
});
function imgList() {
    $.ajax({
        type:'get',
        url:'http://127.0.0.1:3333/home',
        dataType:'json',
        success:function(res){
            console.log(res);
            //截图10条
            var data = res.slice(0,10);
            if(data.length>0){
                $.each(data,function(index,item){
                    $(".index-main ul").append('<li class="lists"> '+
                        '<img src="'+item.product_img_url+'"  width="150" height="150">'+
                        '<label>'+
                            '<b class="discount">'+item.product_uprice+'</b>'+
                            '<span class="price-text">'+item.product_price+'</span> '+
                        '</label>  '+          
                    '</li>')
                })
            };
        },
        error:function(error){
            console.log(error);
        }
    });
}

 

 

桃根仙
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端性能优化之图片按需加载
weixin_47723644的博客
02-11 836
按需加载为什么要做性能优化？什么是按需加载按需加载思路代码 为什么要做性能优化？ 1、加快页面展示和运行速度(增强用户体验) 2、节约服务器带宽流量 3、减少服务器压力 什么是按需加载 按需加载是前端性能优化的一大措施。顾名思义，按需加载就是根据需要去加载资源。比如在html代码中我们会使用img标签来插入图片，而加载图片需要时间，一旦图片过多过大，就需要用户等待很长时间才能将页面加载出来。因此我们可以用体积较小的占位图来代替暂时不需要展示的图片，以此来减少加载时间。 很明显占位图比正常图片小很多,这样就可
Androidstudio关于美食的前端范例嗯嗯
08-24
总结来说，这个"Androidstudio关于美食的前端范例"项目涵盖了Android开发的多个重要方面，包括用户界面设计、网络数据处理、登录功能的实现等。通过学习和理解这些技术，开发者可以构建出更复杂、功能更全面的...
uniapp实战项目 （仿知识星球App) - - 实现图片懒加载
热门推荐
业余丰富各种技术栈
08-23 2万+
uniapp实战，实现图片懒加载，二次封装可复用组件
图片懒加载的四种实现方案
最新发布
qq_44741577的博客
05-30 1063
懒加载：延迟加载，对于一个很长的页面，优先加载可视区域的内容，其他部分等进入可视区域时再加载。
uniApp uview图片懒加载
m0_57547956的博客
09-08 3091
常见需求：图片懒加载 使用了uview的组件进行原生image的替换 <!-- 图片懒加载 --> 360单位是rpx <u-lazy-load height="360" :image="DataResult.goodsImg" img-mode="scaleToFill"></u-lazy-load> <!-- <image class="radio-image imageWh" :src="DataResult.goodsImg">&.
uniapp兼容h5、app、微信小程序图片懒加载
study_azhuo的博客
06-08 1044
【代码】uniapp兼容h5、app、微信小程序图片懒加载。
Google+Android+SDK开发范例大全
03-07
4.22 加载手机磁盘里的图文件——使用decodeFile方法 4.23 动态放大缩小ImageView里的图片——运用Matrix对象来缩放图文件 4.24 动态旋转图片——Bitmap与Matrix旋转ImageView 4.25 猜猜我在想什么——...
科技机械制造企业网站html静态前端模板_简单html网页范例
12-04
HTML静态前端模板的优点在于其简洁高效，加载速度快，易于维护和更新。开发者可以根据实际需求进行定制和扩展，同时，由于是静态页面，安全性相对较高。 综上所述，这个模板为企业提供了一个全面的科技机械制造网站...
jquery ajax 简单范例(界面+后台)
10-26
首先，让我们看看前端部分，这部分主要由 JavaScript 代码组成，使用了 jQuery 库。jQuery 的 `$(document).ready` 函数确保在页面加载完成后再执行内部的代码。以下是四个不同的 AJAX 示例： 1. **AJAX GET 请求...
weui微信前端样式
07-24
WeUI 是一套基于微信视觉设计规范的开源前端框架，专为微信 Web 服务设计，旨在提供一套更符合微信用户界面体验的组件库。这个压缩包文件包含的就是 WeUI 的核心样式资源。 WeUI 的主要特点和知识点包括： 1. **...
vue路由懒加载 / 按需加载的两种方式
evalost的博客
07-01 1013
当项目过大时，我们可以使用按需加载来减少首屏加载的时间，避免白屏、等待时间过长等问题。 常用的懒加载方式有两种： 1.vue的异步组件 const routes = [ { path:'./home', name: 'Home', component: (resolve) => { require('../views/Home.vue', resolve) } ...
预加载是什么？懒加载是什么？以及两者之间的区别
qq_48959471的博客
05-15 6463
什么是预加载？ 什么是懒加载？ 预加载和懒加载的区别是什么呢？
web前端图片懒加载实现原理
Lucky Star的博客
06-25 1万+
一、html（这里只列出相关的结构，body那些就不列了~） ul> li>1li> li>2li> li>3li> li>4li> li>5li> ul> img class="imgLazyLoad" data-src="http://office.qq.com/images/title.jpg" /> ul> li>1li> li>2
在vue处理中懒加载和按需加载
qq_27628085的博客
08-21 543
vue中的懒加载和按需加载懒加载按需加载 懒加载 （1）懒加载定义：懒加载页脚延迟加载，即在需要的时候进行加载，随用随载入 （2）异步加载三种表示方法： 1. resolve=>require([URL],resolve),//支持性好 2. ()=>system.import(URL),//webpack2官网已经声明将逐渐废除，不推荐使用， 3. ()=>import(URL),//webpack2官网推荐使用，属于es7范畴，需要配合babel的syntax-dynamic- im
前端实现图片懒加载(lazyload)的两种方式
weixin_33738555的博客
12-01 436
在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。 思路： 将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到...
Jquery实现前端图片懒加载
cmf1994的博客
06-08 1183
需求：一个页面中图片很多时，只加载即将浏览的图片，而不是每次都加载全部的图片参考文档：1.懒加载的原理                 2.懒加载的实现实现原理：            在img标签中自定义一个属性data-src来存放真实的图片地址，将src置为空，此时图片不会加载，用jquery代码控制当每个图片元素显示在浏览器窗口时，将data-src的值赋给src，此时开始加载图片下面是可...
图片懒加载的实现
zl13015214442的博客
03-16 7304
1. dataset HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串。img标签中的data-src属性就属于一种自定义的dataset属性。 举个例子： &amp;lt;div id=&quot;today&quot; data-food=&quot;sushi&quot; ...
Lua异步加载资源的使用范例
05-29
下面是一个使用Lua语言和Unity引擎的协程来实现异步加载资源的范例： ``` -- 定义一个异步加载资源的函数 function LoadAssetAsync(assetName, assetType, callback) -- 创建一个协程，用于异步加载资源 local co...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值