zoukankan      html  css  js  c++  java
  • 解决搜狗微信公众号采集后图片无法正常加载的问题

    目前我们一般是从搜狗搜索引擎中的微信搜索中取爬,经过我的反复尝试,总结宝贵经验如下供各位参考:

    1、如何准确的搜索公众号文章内容,经过反复测试,使用以下格式进行微信文章搜索准确率最高:

    gh_a84c4fbe9570‘阿法牛AlphaBull’
    gh_b82cbf247f79‘大家关心的那些事’
    gse2011‘广州航运交易所’
    haiexingzhb‘海e行’
    shipping56‘海运网’
    JiangsuMSABulletin‘江苏海事发布’
    gh_15cfa3c8a4cb‘航运安全新动态’
    hjsdw5678‘黄金水道网’
    sitcbrokers‘海丰经纪’
    suxinpeisong‘航运潮汐’
    MaritimeCenter‘海商法研究中心’
    supershipper‘超级船东资讯’

    即公众号账号吗+单引号括起来的公众号中文名称。

    2、解决微信正文图片懒加载的问题,这个比较常见,用js脚本解决:

        start();
        $(window).on('scroll', function () {
            start();
        })
    
        function start() {
            $('.container img').not('[data-isLoaded]').each(function () {
                var $node = $(this);
                if (isShow($node)) {
                    loadImg($node);
                }
            })
        }
    
        function isShow($node) {
            return $node.offset().top <= $(window).height() + $(window).scrollTop();
        }
        function loadImg($img) {
            $img.attr('src', $img.attr('data-src'));
            $img.attr('data-isLoaded', 1);
        }
    

    3、解决微信WebP图片无法加载(跨域、外链限制、WebP格式限制等):

    我们借助搜狗搜索的接口来处理,可以发现,搜狗微信搜索结果列表中的缩略图地址,实际就是用搜狗专门的一个接口处理过的,也即在后台先下载转码,再提供给前台调用:

        function showImage() {
            var imglist = $("img[data-src]");
            for (var i = 0; i < imglist.length; i++) {
                if (imglist[i].getAttribute('src')) {
                    if (imglist[i].getAttribute('src').indexOf("mmbiz.qpic.cn") != -1) {
                        imglist[i].setAttribute('src', 'https://img01.sogoucdn.com/net/a/04/link?appid=100520033&url=' + imglist[i].getAttribute('src'));//sogou微信搜索缩略图
                    }
                }
            }
        }
        showImage();
    

     同时,还需要在网页<head>中增加:
        <meta name="referrer" content="no-referrer"/>

    作用是避免被判断为非法引用

  • 相关阅读:
    Ztree下拉框多选
    FullCalendar日程插件
    viscose 前端常用插件
    一些词
    关于require()和export引入依赖的区别
    关于CMD/AMD和Common.js/Sea.js/Require.js
    vue中的双向数据绑定原理简单理解
    Vue-cli简单使用
    webpack简单配置
    vuex基础
  • 原文地址:https://www.cnblogs.com/cdoneiX/p/13814506.html
Copyright © 2011-2022 走看看