uni-app基于plus.downloader的图片懒加载功能，支持本地缓存

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app基于plus.downloader的图片懒加载功能，支持本地缓存

基于plus.downloader的图片懒加载功能，支持本地缓存

如果有样式问题的话，请移步至http://www.cnblogs.com/phillyx/p/4649128.html

简单说一下

在app中，对一些变动不频繁的图片数据（如个人头像等），是需要存储在本地的。我相信这对大多数的app都是强需求的。

怎么使用呢

img标签默认都有data-src属性，用来存放网络链接，src属性初始是最好给一个默认本地图片链接，下载好会自动替换掉

<img data-src="远程链接" src="默认图片">

如果在列表中，通过下拉刷新、上拉刷新加载数据，加载下一页的时候可以如下做：

一次新增多条数据时，为避免重复渲染页面及重新下载正在下载中的图片等问题，新增的img要设置data-pageno属性,如下使用arttemplate写的模板

<script id="tmpl" type="text/html">  
{{each items as item i}}  
        <li class="mui-table-view-cell" data-id='{{item.id}}'>  
          <img data-src="{{item.url}}" data-pageno="{{item.pageno}}" src="img/default.png">  
        </li>  
{{/each}}  
</script>

在js中怎么用呢

var html = template('tmpl', data);  
document.querySelector("#pullrefresh").innerHTML  = html;  
lazyImg.pageno=data.pageno;  
lazyImg.lazyLoad();

如果不需要分页或者零散的数据，直接添加lazy类就可以了

<img data-src="远程链接" src="默认图片" class="lazy">

然后直接调用lazyImg.lazyLoad()就可以了

注意

lazyimg.js是结合cache.js一齐使用的，代码都已提交至github

地址在https://github.com/phillyx/MUIDemos/tree/master/js/lazyimg.js

也可直接使用合并后的代码https://github.com/phillyx/MUIDemos/tree/master/dist/common.js


Harmonyos Next教程
1 回复

在uni-app中实现基于plus.downloader的图片懒加载功能并支持本地缓存，可以通过以下步骤来实现。这涉及到使用plus.downloader来下载图片，并将其缓存到本地，同时在需要显示图片时通过监听滚动事件来实现懒加载。以下是一个简化的代码示例：

1. 引入必要的模块

首先，确保你的项目中已经引入了必要的模块，并进行了相应的权限申请。

// manifest.json 中申请网络权限和文件系统权限
{
  "mp-weixin": { // 或其他平台配置
    "requiredPrivateInfos": ["chooseImage", "saveImageToPhotosAlbum"]
  },
  "plus": {
    "distribute": {
      "android": {
        "permissions": [
          "INTERNET",
          "WRITE_EXTERNAL_STORAGE"
        ]
      },
      "ios": {
        "plist": [
          "NSAppTransportSecurity",
          "NSPhotoLibraryAddUsageDescription"
        ]
      }
    }
  }
}

2. 下载并缓存图片

使用plus.downloader下载图片并缓存到本地。

function downloadAndCacheImage(url, callback) {
  const dtask = plus.downloader.createDownload(url, {}, (d, status) => {
    if (status === 200) {
      const localPath = d.filename; // 本地缓存路径
      callback(localPath);
    } else {
      console.error('Download failed:', status);
    }
  });
  dtask.start();
}

3. 懒加载图片

通过监听页面滚动事件来实现图片的懒加载。

<template>
  <view>
    <scroll-view scroll-y="true" @scroll="onScroll">
      <view v-for="(img, index) in images" :key="index">
        <image v-if="img.localPath" :src="img.localPath" style="width: 100px; height: 100px;"></image>
        <view v-else class="placeholder" @click="loadImage(img, index)"></view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'https://example.com/image1.jpg', localPath: '' },
        // 更多图片...
      ],
      threshold: 100 // 滚动阈值
    };
  },
  methods: {
    onScroll(e) {
      const scrollTop = e.detail.scrollTop;
      const scrollHeight = e.detail.scrollHeight;
      const clientHeight = uni.getSystemInfoSync().windowHeight;
      if (scrollTop + clientHeight >= scrollHeight - this.threshold) {
        this.loadMoreImages();
      }
    },
    loadImage(img, index) {
      downloadAndCacheImage(img.url, localPath => {
        this.$set(this.images, index, { ...img, localPath });
      });
    },
    loadMoreImages() {
      // 根据需要加载更多图片的逻辑
    }
  }
};
</script>

以上代码展示了如何在uni-app中实现基于plus.downloader的图片懒加载功能并支持本地缓存。注意，这里的示例代码仅用于说明原理，实际应用中可能需要根据具体需求进行调整和优化。

回到顶部