文档章节

解决v-lazy-image在qq浏览器x5内核下无效

吾爱
 吾爱
发布于 2019/04/20 15:20
字数 450
阅读 95
收藏 0

故障:在安卓qq浏览器中,v-lazy-image始终无法显示。

原因分析:

经调试,发现qq浏览器中IntersectionObserver缺少一个isIntersecting字段,而v-lazy-image插件是根据isIntersecting来显示图片的,故只能借助intersectionRatio判断。

另外还有一点差别就是如果v-lazy-image组件初始宽高为0的话,会导致intersectionRatio始终为0。

解决方案:

基于v-lazy-image源码修改自定义一个vue插件模块,代码见文末。

v-lazy-image使用的时候设置 src-placeholder ,保证v-lazy-image有个初始大小,这里我随便制作了一个 1x1 的空白图片,示例代码如下

main.js 修改

import { VLazyImagePlugin } from './plugins/VLazyImage'
// polyfill
require('intersection-observer')
Vue.use(VLazyImagePlugin)

组件:

<template>
	<div>
		<v-lazy-image :src="product_image" :src-placeholder="lazyPlaceholder"/>
		<v-lazy-image :src="product_image" :src-placeholder="lazyPlaceholder"/>
		<v-lazy-image :src="product_image" :src-placeholder="lazyPlaceholder"/>
	</div>
</template>
<script>
export default {
	data () {
		product_image: 'http://img.alicdn.com/imgextra/i1/3990548613/O1CN01VxNcOn2DUnnBu8jIW_!!0-item_pic.jpg',
		lazyPlaceholder: require('./lazy-placeholder.png')
	},
	mounted () {
		// ...
	}
}
</script>

修改后的插件源码:plugins/VLazyImage

const VLazyImageComponent = {
  props: {
    src: {
      type: String,
      required: true
    },
    srcPlaceholder: {
      type: String,
      default: ''
    },
    srcset: {
      type: String
    },
    intersectionOptions: {
      type: Object,
      default: () => ({})
    },
    usePicture: {
      type: Boolean,
      default: false
    }
  },
  inheritAttrs: false,
  data: () => ({ observer: null, intersected: false, loaded: false }),
  computed: {
    srcImage () {
      return this.intersected ? this.src : this.srcPlaceholder
    },
    srcsetImage () {
      return this.intersected && this.srcset ? this.srcset : false
    }
  },
  methods: {
    load () {
      if (this.$el.getAttribute('src') !== this.srcPlaceholder) {
        this.loaded = true
        this.$emit('load')
      }
    }
  },
  render (h) {
    let img = h('img', {
      attrs: {
        src: this.srcImage,
        srcset: this.srcsetImage
      },
      domProps: this.$attrs,
      class: {
        'v-lazy-image': true,
        'v-lazy-image-loaded': this.loaded
      },
      on: { load: this.load }
    })
    if (this.usePicture) {
      return h('picture', { on: { load: this.load } }, this.intersected ? [ this.$slots.default, img ] : [])
    } else {
      return img
    }
  },
  mounted () {
    if ('IntersectionObserver' in window) {
      this.observer = new IntersectionObserver(entries => {
        const image = entries[0]
        if (image.isIntersecting || image.intersectionRatio) {
          this.intersected = true
          this.observer.disconnect()
          this.$emit('intersect')
        }
      }, this.intersectionOptions)
      this.observer.observe(this.$el)
    } else {
      console.error(
        "v-lazy-image: this browser doesn't support IntersectionObserver. Please use this polyfill to make it work https://github.com/w3c/IntersectionObserver/tree/master/polyfill."
      )
    }
  },
  destroyed () {
    this.observer.disconnect()
  }
}

export default VLazyImageComponent

export const VLazyImagePlugin = {
  install: (Vue, opts) => {
    Vue.component('VLazyImage', VLazyImageComponent)
  }
}

© 著作权归作者所有

下一篇: go调用动态库
吾爱
粉丝 142
博文 272
码字总数 91680
作品 0
后端工程师
私信 提问
加载中

评论(0)

AppCan + 腾讯浏览服务:更快的APP

移动互联网时代,Web场景没有变少,而是越来越多的分布在各个APP里。越来越多的开发人员采用Hybrid模式,更方便和轻量的部署移动业务。而作为Hybrid模式的重要一环,APP中对web场景的浏览能力...

梅朵
2016/05/06
323
0
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)

前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试也由于 safari 的打通变得很方便。而 Android 系统,尤其是国内环境下的 Andr...

2018/07/24
0
0
Android-微信浏览器/qq浏览器内如何实现调用并打开手机第三方应用?

背景: 公司app有个需求,分享的新闻链接能用自己的app打开浏览,未安装时引导用户安装; 平台:android/ios; 分享SDK:友盟社会化分享SDK 目前方案: android客户端使用intent-filter过滤设...

清风烈酒-
2015/05/13
1.3W
2
tbs(腾讯浏览器)视频相关配置

一、修改video标签: 公众号里使用的是腾讯视频,所以可以做到,你自己的视频无法解决,稍微好一点的方案是添加x5-video-player-type="h5" x5-video-player-fullscreen="false" 至于-webkit...

Carbenson
2018/10/25
518
0
腾讯X5内核手机浏览器泄露 或建国内首个Html5应用市场

有传闻称腾讯正内测一款全新手机浏览器,该浏览器将搭载了腾讯基于优秀开源Webkit深度优化的“X5内核”,在web/wap页面打开速度、省 流量、UI和多窗口交互方式、Html5等方面都与现有的手机QQ浏...

虫虫
2012/01/05
2.5K
13

没有更多内容

加载失败,请刷新页面

加载更多

union

https://www.runoob.com/sql/sql-union.html

七宝1
29分钟前
26
0
项目架构

大多数的程序员,都是做业务开发的,我也是。每天的工作都围绕着产品的需求。我们总在不停地写需求,在不停地堆砌代码,还在不停地解决Bug。后来,我们越来越陷入细节,越来越不能把握全局。...

道道法
昨天
13
0
pygame关卡游戏之口红挑战游戏(小组)

游戏简介及操作: 1.游戏分为三关,每关限时60秒。 2.游戏每关难度递增。(轮盘的转速越来越快,口红数量的增多) 3.口红命中一个,增加10分。 4.口红命中重复位置即为失败。 开发工具:Pyc...

kikifly
昨天
18
0
textview简单实现圆角效果

在 drawable里面 创建一个 text_corner.xml 文件 <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:col......

chenhongjiang
昨天
34
0
RabbitMQ消息中间件技术精讲笔记

[TOC] RabbitMQ消息中间件技术精讲笔记 错别字有点多, 改了一部分. 剩下的不影响阅读,实在没精力改了... 业界主流消息中间件介绍 MQ衡量指标 服务性能 数据存储 集群架构 主流MQ介绍 Active...

我爱吃炒鸡
昨天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部