当用于大型多媒体文件时, 延迟加载会花费一些时间来加载图片, 视频等。
例
让我们以一个示例来演示延迟加载的用法, 该延迟加载通过触发Framework7中的“ lazy”事件来加载图像:
<
!DOCTYPE html>
<
html>
<
head>
<
meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<
meta name = "apple-mobile-web-app-capable" content = "yes" />
<
meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<
title>
Lazy Loading<
/title>
<
link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<
link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<
/head>
<
body>
<
div class = "views">
<
div class = "view view-main">
<
div class = "pages">
<
div data-page = "home" class = "page navbar-fixed">
<
div class = "navbar">
<
div class = "navbar-inner">
<
div class = "left">
<
/div>
<
div class = "center">
Lazy Loading<
/div>
<
div class = "right">
<
/div>
<
/div>
<
/div>
<
div class = "page-content">
<
div class = "swiper-container">
<
div class = "swiper-wrapper">
<
div class = "swiper-slide">
<
img data-src = "http://lorempixel.com/1600/1200/nature/1" class = "swiper-lazy">
<
div class = "preloader">
<
/div>
<
/div>
<
div class = "swiper-slide">
<
img data-src = "http://lorempixel.com/1600/1200/nature/2" class = "swiper-lazy">
<
div class = "preloader">
<
/div>
<
/div>
<
div class = "swiper-slide">
<
img data-src = "http://lorempixel.com/1600/1200/nature/3" class = "swiper-lazy">
<
div class = "preloader">
<
/div>
<
/div>
<
div class = "swiper-slide">
<
img data-src = "http://lorempixel.com/1600/1200/nature/4" class = "swiper-lazy">
<
div class = "preloader">
<
/div>
<
/div>
<
div class = "swiper-slide">
<
img data-src = "http://lorempixel.com/1600/1200/nature/5" class = "swiper-lazy">
<
div class = "preloader">
<
/div>
<
/div>
<
/div>
<
div class = "swiper-pagination color-white">
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js">
<
/script>
<
style>
.swiper-container {height:100%;
}.swiper-slide {background:#000;
position:relative;
height:100%;
}.swiper-slide img {position:absolute;
left:50%;
top:50%;
max-width:100%;
max-height:100%;
width:auto;
height:auto;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}<
/style>
<
script>
var myApp = new Framework7();
var mySwiper = new Swiper('.swiper-container', {preloadImages: false, lazyLoading: true, pagination: '.swiper-pagination'})<
/script>
<
/body>
<
/html>
【Framework7延迟加载】立即测试
推荐阅读
- Framework7多个滑动器
- Framework7默认的滑动与分页
- Framework7自定义控件
- Framework7选项卡JavaScript事件
- Framework7滑动滑块
- 从导航栏切换选项卡
- 使用JavaScript的Framework7显示选项卡
- Framework7可滑动标签
- Framework7内联选项卡