在线商城项目05-利用mock数据进行渲染和图片懒加载

简介

既然我们已经能从mock服务器拿到mock数据,现在的任务就是用拿到的数据进行页面渲染,另外,由于页面的图片数据太多,为了提高性能,我们会使用图片懒加载。本篇我们主要进行如下工作:

  1. 利用mock数据进行渲染
  2. 图片懒加载

1. 利用mock数据进行渲染

step1 引入图片资源 大家需要把resources中的图片资源copy到static文件夹下。

step2 将数据绑定到对应位置 对GoodsList.vue进行如下改动

          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="item in prdList" :key="item.productId">
                  <div class="pic">
                    <a href="#"><img :src="`../../../static/${item.productImage}`" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">{{item.salePrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

如图所示:

这里使用v-for会要求我们绑定key,这里建议用productId绑定key,原因可以看Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究

2. 图片懒加载

由于产品列表页面有众多的图片,影响了首屏加载速度,所以我们对图片进行懒加载。这里使用一个插件叫做vue-lazyload

我们先安装该插件:

npm install --save vue-lazyload

然后在main.js中作如下修改:

import Vue from 'vue'
import App from './App'
import router from './router'
import VueLazyLoad from 'vue-lazyload'

import './assets/css/base.css'
import './assets/css/login.css'
import './assets/css/product.css'

Vue.config.productionTip = false

Vue.use(VueLazyLoad, {
  loading: '../static/loading/loading-bars.svg',
  error: '../static/ok-2.png'
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在GoosList.vue中作如下修改:

<a href="#"><img v-lazy="`../../../static/${item.productImage}`" alt=""></a>

现在我们来看一下效果:

可以看到在页面滚动之前,4.jpg和5.jpg并没有下载,直到视图滚动到其可见时才开始加载。

总结

这节主要是讲了两个小的优化点。我们提交以下代码:

git status
git diff
git add .
git commit -am 'data bind and vue-lazyload'
git push

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

开发 | 小程序自定义组件怎么用?看完这篇文章你就知道了

之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时,官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦。

1203
来自专栏前端知识分享

第146天:移动H5前端性能优化

4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB

1504
来自专栏极客慕白的成长之路

图标字体应用实践

使用的时候,通过background-position调整显示的位置,如下图所示:

1542
来自专栏依乐祝

.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CM...

1873
来自专栏快乐八哥

使用jQuery Tools scrollable注意事项

项目开发中一直使用jQuery Tools中scrollable插件,一直也只是停留在使用上,最多看文档实现如何调用它的prev(spped)和next(spe...

19910
来自专栏HTML5学堂

传统企业站开发 - 页面布局

前几期我们讲解了HTML+CSS的基本知识点,也带着大家分析过一些案例。从简单的页面结构到页面布局的实现,再到页面的优化。我们学习到的东西挺多的,但是在实战开发...

4336
来自专栏静默虚空的博客

jQuery 简介和安装

什么是jQuery jQuery是一个轻量级的"写的少,做的多"的JavaScript库。 jQuery库包含以下功能: HTML 元素选取 HTML 元素...

2345
来自专栏静默虚空的博客

详谈如何定制自己的博客园皮肤

如果你仅仅想原封不动的使用本人的定制皮肤,而不想了解实现细节。那么你只需要完成以下几个步骤即可,后面的章节可以忽略。

3700
来自专栏前端人人

React第三方组件1(路由管理之Router的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

2763
来自专栏CSDN技术头条

【独家】饿了么前端团队快应用背后研发实践

饿了么是一年前开始参与内测尝试开发快应用的,看着快应用平台一步一步的走过来,发展的越来越好。目前来说快应用开发条件已经比较完善,本次分享,为大家介绍前端开发人员...

2153

扫码关注云+社区

领取腾讯云代金券