寻找与网页相关的图片现在看来无非有两种方式,第一种是网页自己指定,第二种是通过算法推断。

对于网站的内容提供者来说,他自己知道相关的图片在哪,正如前文所述可以在HTML的头部加上META标签,也可以像网易新闻和qq空间一样,作为一个参数写在javascript脚本里。

qq空间分享代码

<script type="text/javascript">
(function(){
var p = {
url:location.href,
showcount:'1',/*是否显示分享总数,显示:'1',不显示:'0' */
desc:'',/*默认分享理由(可选)*/
summary:'',/*分享摘要(可选)*/
title:'',/*分享标题(可选)*/
site:'',/*分享来源 如:腾讯网(可选)*/
pics:'', /*分享图片的路径(可选)*/
style:'203',
width:98,
height:22
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i]||''));
}
document.write(['<a version="1.0" class="qzOpenerDiv" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?',s.join('&'),'" target="_blank">分享</a>'].join(''));
})();
</script>

这是qq空间分享所需要插入的代码,可以看到网站可以自己指定网站的摘要、标题、图片的路径等信息。所有的这些信息都是可选的,如果不填写这些信息呢,那就无从知晓了,背后的某个算法会找到合适的图片。

网易新闻分享代码

//顶部分享 底部分享
(function() {
NTES.ready(function() {
if(window.article_share14){
article_share14.setAttribute('data-url', window.location.href);
article_share14.setAttribute('data-title', document.title);
article_share14.setAttribute('data-pic', "http://img3.cache.netease.com/tech/2015/4/28/2015042812043170750_550.jpg");
article_share14.setAttribute('data-digest', "");
article_share14.setAttribute('data-source', "网易科技");
} if(NTES("#article_share13")){
article_share13.setAttribute('data-url', window.location.href);
article_share13.setAttribute('data-title', document.title);
article_share13.setAttribute('data-pic', "http://img3.cache.netease.com/tech/2015/4/28/2015042812043170750_550.jpg");
article_share13.setAttribute('data-digest', "");
article_share13.setAttribute('data-source', "网易科技");
} WbApi.initShareTipsSm({ sourceUrl: "http://tech.163.com/",
source: encodeURIComponent("网易科技"),
title: encodeURIComponent(document.title),
link: encodeURIComponent(window.location.href + '#sns_163') }, "wb-article-share-end"); });
})();

网易新闻的做法也以类似的方式自己指定相关图片的url。这对于网站发布内容的人来说着实是一个不错的方式,因为他们自己知道相关图片的url。但这有点像作弊,只会对一种网站有效,而不具有普遍性的规律。

寻找与网页内容相关的图片(三)网易新闻与qq空间的做法的更多相关文章

  1. 寻找与网页内容相关的图片(二)reddit的做法

    正如前文所述,内容聚合网站,比如新浪微博.推特.facebook等网站对于网页的缩略图是刚需.为了让分享的内容引人入胜,网页的图片缩略图是必不可少的.年轻人的聚集地.社交新闻网站reddit也是一个这 ...

  2. 【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片

    前言 此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道 ...

  3. 仿网易新闻 ViewPager 实现图片自动轮播

    新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...

  4. 仿Android网易新闻客户端,并增加水平图片滑动,改进阅读体验

    仿网易新闻Android端APP 主要功能展示和代码实现 差不多花了一周的时间,目前实现的了新闻下的包括头条.体育.娱乐的一系列的新闻展示,以及点击后进入的新闻详情展示. 目前效果 目前效果请访问该网 ...

  5. 【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之RAC 工作原理和相关组件(三)

    RAC 工作原理和相关组件(三) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇总.然后形成体 ...

  6. 用canvas 实现个图片三角化(LOW POLY)效果

    之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下. 我是没怎么用过threejs,所以就直接用canvas的2 ...

  7. 寻找与疾病相关的SNP位点——R语言从SNPedia批量提取搜索数据

    是单核苷酸多态性,人的基因是相似的,有些位点上存在差异,这种某个位点的核苷酸差异就做单核苷酸多态性,它影响着生物的性状,影响着对某些疾病的易感性.SNPedia是一个SNP调査百科,它引用各种已经发布 ...

  8. 2017.2.7 开涛shiro教程-第六章-Realm及相关对象(三)

    原博客地址:http://jinnianshilongnian.iteye.com/blog/2018398 根据下载的pdf学习. 第六章 Realm及相关对象(三) 1.准备3个Realm MyR ...

  9. 【转】【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之RAC 工作原理和相关组件(三)

    原文地址:http://www.cnblogs.com/baiboy/p/orc3.html 阅读目录 目录 RAC 工作原理和相关组件 ClusterWare 架构 RAC 软件结构 集群注册(OC ...

随机推荐

  1. linux添加vim编辑器和一些用法

    vim.tar文件在自己的百度云盘里面,linux目录下 上传vim.tar文件,解压 vim编辑文件的一些快捷方式: n+t打开文件所在目录,显示在左侧 ctrl+w+l 切换到右边文件ctrl+w ...

  2. mapper.xml配置读取不到

    通常我们在sping的配置文件中,扫描到mapper文件,但是mapper.xml找不到,此时解决办法就是在pom中添加下面代码: <resources> <resource> ...

  3. python读书笔记-《A Byte of Python》中文第三版后半部分

    编辑器:windows,linux 不要用notepad,缩进糟糕 -------------- 5.18缩进 同一层次的语句必须有相同的缩进.每一组这样的语句称为一个块. i = 5 2  prin ...

  4. RabbitMQ 命令

    1.RabbitMQ 服务启动与关闭 同时启动RabbitMQ 节点和erlang服务 普通方式启动./rabbitmq-server守护线程方式启动./rabbitmq-server –detach ...

  5. 单线程的redis为什么达到每秒万级的处理速度?

    纯内存访问,redis将所有数据都放在内存中,内存响应时间大约为100纳秒,这是redis达到每秒万级级别访问的重要基础. 非阻塞IO,redis使用epoll作为IO多路复用技术的实现,再加上red ...

  6. [技巧篇]06.关于防止SQL注入的方式,不使用预处理

    在一期,二期阶段,有一些同学,对于SQL语句总是使用字符串的拼接,这是一个比较坏的毛病,这样非常影响我们的程序的安全性,所以一般情况下我们都推荐预处理模式,针对这种模式希望不了解的同学去努力学习,下面 ...

  7. jQuery中val()、text()、html()之间的差别

    一.括号里没有值时表示取值    val获取表单中的值: text获取对象中的文本内容,不包含html标签: html获取对象中的内容,包括html标签 <!DOCTYPE HTML> & ...

  8. 阿里云oss命令详解

    SYNOPSIS 上传,下载或拷贝Objects SYNTAX ossutil cp file_url cloud_url [-r] [-f] [-u] [--output-dir=odir] [-- ...

  9. Golang向Templates 插入对象的值

    Go对象可以插入到template中,然后把对象的值表现在template中,你可以一层层的分解这个对象,去找他的子字段,当前对象用'.'来表示,所以当当前对象是一个string的时候,你可以用{{. ...

  10. .NET RabbitMQ

    在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这 种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的但是执行起来比较较耗时的地方,比如发送短 ...