---
title: "网站图片查看器调用方法(符合SEO优化)"
url: "https://www.seosiguan.com/post/517.html"
id: "https://www.seosiguan.com/post/517.html"
language: "zh-Hans"
---

图片做好适配优化可以为网站带来很好的[SEO效果](https://www.seosiguan.com/)，但是要考虑到用户使用的浏览器因素，参考QQ浏览器给出的图片优化方法。

**图片查看器调用帮助**

经过深度的行业调研与用户访谈发现，图片支持手势缩放等操作已在用户侧形成了基本认知，因此图片查看功能被确定为搜索移动理想体验中不可或缺的组成部分。本着为用户提供沉浸式浏览体验的理念，平台现推出图片查看器组件供广大合作方实现低成本能力接入，同时也期望合作方依照搜索理想体验标准进行整改，携手共建信息丰富、体验顺畅的用户友好型搜索引擎。

**组件能力**

通过js api注入信息后，H5页面内的图片可在QQ浏览器移动端实现点击调起大图、预览全部图片、以及根据手势对图片进行缩放与回收等操作。**接入方案**

**调用方法**

`<span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">browser.app.openPhotoBrowser(urls, index, [style])</span>`**调用时机**

用户点击图片时调用。**参数说明**

参数类型说明urlArray需要预览的图片url集indexNumber预览起始索引的图片位置styleNumber图片查看器样式**代码示例**

在html页面内引入以下script脚本<script src="https://jsapi.qq.com/get?api=app.openPhotoBrowser" type="text/javascript"></script>
//获取所有需调起图片查看器的图片地址并放入prevImgUrls中
var sectionInfo = this.props.sectionInfo;
var imgUrls = sectionInfo.vImgUrls;
var prevImgUrls = [];

_.each(imgUrls, function (item) {
prevImgUrls.push(item.sImgUrl);
});

//下述代码示例默认调起第一张图片，合作方可根据需求自行修改index字段
setTimeout(function() {
window.browser &&
window.browser.app &&
window.browser.app.openPhotoBrowser &&
browser.app.openPhotoBrowser(prevImgUrls, 0, 0);
}, 0);
注意：该能力仅在QQ浏览器内，判断方式是UserAgent中包含MQQBrowser

以上即为图片查看器的调用说明，未包含图片事件点击绑定，各位合作方可以通过事件代理或者直接在图片上绑定事件来实现。

对于搜狗搜索的SEO优化是非常有用的，因为QQ浏览器默认搜索引擎就是搜狗搜索，但是只要是用QQ浏览器的用户打开网站也是利于其他搜索引擎的SEO优化的，因为好的图片体验是可以增加用户的停留时间。