响应式滚动图懒加载 element ui el-carousel 组件优化代码

懒加载插件vue-lazyload

//main.js
import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, {preLoad: 1.3,attempt: 1, // 加载图片数量listenEvents: ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
})

<template><el-carousel :interval="3000" indicator-position="none" id="el-carousel"><el-carousel-item v-for="img in list" :key="img"><img v-lazy="img"></el-carousel-item></el-carousel>
</template><script>
export default {data() {return {bannerHeight: 700,screenWidth: 1920,list: [//banner 图地址"http://ip/image/home/banner1.jpg","http://ip/image/home/banner2.jpg","http://ip/image/home/banner3.jpg","http://ip/image/home/banner4.jpg"]};},beforeMount() {this.screenWidth = this.getwidth();//图片                高 / 宽  700 / 1920this.bannerHeight = (700 / 1920) * this.screenWidth - 50;console.log('bannerHeight', bannerHeight)},mounted() {const that = this;document.getElementById("el-carousel").style.height =this.bannerHeight + "px";//监听浏览器窗口大小改变window.addEventListener("resize",function () {that.screenWidth = that.getwidth();that.setSize();},false);},methods: {getwidth() {var width =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;return width;},setSize: function () {this.bannerHeight = (700 / 1920) * this.screenWidth - 50;document.getElementById("el-carousel").style.height =this.bannerHeight + "px";}}
};
</script><style>
.el-carousel__container {height: 100% !important;
}img {display: inline-block;height: auto;max-width: 100%;
}
</style>

响应式滚动图懒加载 element ui el-carousel 组件优化代码相关推荐

基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览源码下载实 ...
css怎么实现加载的圆圈_图像高清方案——响应式图像让图像加载又快又省
# 什么是响应式图像响应式图像指的是根据设备分辨率.设备像素比,甚至是屏幕方向.屏幕尺寸.页面布局等来加载正确图像,并且图片体积尽可能的小,视觉效果足够高清. 一个真实的场景:用户上传了一张高清图片 ...
VUE路由懒加载的方式——VUE异步组件
学了vue写项目这么久,忽然发现路由懒加载的写法,节省了加载所有路由的时间. 如图所示: 我们一开始用ES6的写法,在路由文件router/index.js中引入所有路由要用到的组件,然后在每个路由对 ...
js图片懒加载原理、实现及节流优化
1.懒加载原理在图片没有进入可视区域时,先给的src一个默认加载的图片,这样浏览器就不会发送请求了,等到图片进入可视区域再把真实的图片路径data-src给src. 2.具体实现 1. 效果 2. ...
CSS响应式：根据分辨率加载不同CSS的几个方法
一般情况下,根据分辨率加载pc端 wap端 pad端三个css文件,示例: <link rel="stylesheet" type="text/css" ...
WordPress主题 Tob 自适应响应式小清新无限加载图片主题[更新v0.5]
Tob是用户体验不错的WordPress主题,支持无限加载够炫酷!完美的自适应布局,完善的图片站主题. 产品特点: SEO优化: 完美的基础SEO优化.首页关键字和描述自定义.文章关键字和描述的自定义 ...
WordPress主题 Tob 自适应响应式小清新无限加载图片主题[更新v0.3]
Tob是用户体验不错的WordPress主题,支持无限加载够炫酷!完美的自适应布局,完善的图片站主题. 产品特点: SEO优化: 完美的基础SEO优化.首页关键字和描述自定义.文章关键字和描述的自定义 ...
小程序实现滚动加载（懒加载）
前言小程序是一项很受欢迎的技术,随着其能力的不断增强,越来越多的人开始使用小程序来完成各种任务.当我面面临一个页面有非常多的数据时,该如何处理呢,显然一次性全部加载完,会非常消耗性能的,为了解决这些 ...
前端性能优化不完全手册【已更新至React、原生JS懒加载和Nginx负载均衡】
性能优化是一门大学问,本文仅对个人一些积累知识的阐述,欢迎下面补充. 抛出一个问题,从输入url地址栏到所有内容显示到界面上做了哪些事? 1.浏览器向DNS服务器请求解析该 URL 中的域名所对应的 ...

响应式滚动图懒加载 element ui el-carousel 组件优化代码

响应式滚动图懒加载 element ui el-carousel 组件优化代码

懒加载插件vue-lazyload

响应式滚动图懒加载 element ui el-carousel 组件优化代码相关推荐

最新文章

热门文章