常看公众号文章的时候，遇到一个恼人的问题，图片不会加载出来，需要手动点击一下，（公司网络相关策略，不能登微信，但是可以打开公众号文章链接）。另外也是网络原因，公众号内的https链接的图片无法打开，于是萌生了自己写个油猴脚本，自动加载图片的想法。

简单看了下页面dom结构。思路很简单，遍历下img标签，取到data-src属性，这里存了真实的图片url，然后替换掉原来的src属性里的值，这里默认是一个灰色占位图片。触发方法也很简单。每次scroll事件的时候触发。那么，直接开始撸代码

// ==UserScript==
// @name         公众号文章宽屏&图片
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://mp.weixin.qq.com/s*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let func = ()=>{
        let arr = document.getElementsByTagName("img");
        for(let i = 0; i < arr.length-1; i++){
            let src = arr[i].getAttribute("src");
            let dataSrc = arr[i].getAttribute("data-src")
            dataSrc = dataSrc!=null?dataSrc.replace("https://","http://"):'';
            if(src != undefined && src.startsWith("http")){
                arr[i].setAttribute("src",src.replace("https://","http://"))
            }
            if(src != undefined && src.startsWith("data:")){
                arr[i].setAttribute("src",dataSrc)
            }
        }
    }

    window.addEventListener("scroll",func)
    document.getElementsByClassName("rich_media_area_primary_inner")[0].style.width = "100%"
    document.getElementsByClassName("rich_media_area_primary_inner")[0].style.maxWidth = "1080px"
})();

后续：买了个BeeArt会员，想在公司电脑上用下画点图之类的，但是网站直接打不开，看了下报错信息，IndexedDB的问题，由于公司电脑上的Chrome是公司预装的，怀疑是版本太旧的原因，重新安装了89版本的Chrome，果然解决。但是。。。新问题出现了，原先替换https为http链接的图片无法显示了

Mixed Content: The page at 'https://mp.weixin.qq.com/s/L39ufU9YCVIJ9g1WCVQAGQ' was loaded over HTTPS, but requested an insecure element 'http://mmbiz.qpic.cn/mmbiz_png/aaVJqS7LaMJQfIuic9SSvvZFP1hqaKk43iaDicQj9R6dNjpTcf7DgkXdk2v4CxSTUZMxpqkWRCia8jUiaAK2iaPicl9kA/640?wx_fmt=png'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html

一直报这个问题，看了下网络，即使是用的http的图片链接，但是实际请求的还是https链接，查证了一下原来在某个新版本的Chrome中，  开始阻止混合内容 。https的网页中资源链接，默认都转成https的请求。

解决方法：点击地址栏前面的“△不安全”或者锁形图标，有个网站设置选项，找到“不安全内容”，选择运行，这样就又恢复了原来的情况，可以正常访问了。我是个人特例情况，所以我是这么解决的

正确方法：网站在域名做了SSL之后，那么相应配套的资源链接也应该全部切换到SSL，全站HTTPS势在必行