更新回答评论问题

Question

最终编辑：ful-stackz解决方案是正确的，我正在错误地实现它。我需要重构创建div和css的函数，然后在匿名函数中调用它。谢谢！

我刚开始学习基本的html / css / js，我正在尝试构建一个小型的photoblog。到目前为止我所做的是一个拥有容纳所有图片的容器的网站，每个图片都有一个标题，源图像链接，描述和图片的平均颜色。标题，源图像链接，描述以数组格式从json文件加载。 [{＆＃34; src＆＃34;：..等}，{} ...]。该网站加载所有菜单栏的东西，当身体完成加载运行一个js，开始动态生成照片的所有div（）。代码如下。该函数应该解析json文件，并为json数组中的每个项创建一个新的div和一组css规则。在此过程中，它还运行ColorThief以获取每张图片的平均颜色并将其传递到css规则，因此每个div都有自己独特的背景颜色。

问题：当我在机器上本地运行时，一切都运行得很好。所有图片都显示出来，背景颜色按预期工作。但是当我在github.io上运行相同的东西时（在推送并等待一段时间进行更新之后），它不起作用。它运行它，当我检查console.log（img.width）时，显示0。当然，colorthief脚本失败，因为你的图像大小不能为0并期望得到结果。 奇怪的是，每一次刷新，一两张图片弹出，看起来像正确的背景颜色（即跑出去）。当我注释掉colorthief块时，网站加载正如github.io所期望的那样。也就是说，所有图片都显示并加载默认背景颜色。所以我认为（并且我在这里是一个完整的菜鸟），当为DOM分配属性时，某些东西是奇怪的createElement或img.src。

我认为不是问题

我用小写字母制作了所有文件名＃.jpg，其中＃是从1开始随机分配的编号，按顺序编号。
colorthief不是问题，我认为，因为它可以正常离线运行......偶尔也可以上网（当一张或两张图片加载时，它看起来有不同的背景颜色）。
文件名/路径，因为注释掉colorthief块会使网站正常加载。

感谢您的时间和帮助!!

这就是＆＃34; getHighlights（）＆＃34;功能，colorthief块用星号突出显示。当注释掉时，网站加载正常。：

function getHighlights(){
var colorThief = new ColorThief(); // For colorthief to get average color
var img = document.createElement("img");  // For colorthief to get average color
var highlightsJSON = "highlights.json";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    // var html = "";
    var currentElement = "";
    var myArrLength = myArr.length;

    // loads the current stylesheet as a variable
    var myStyle = document.styleSheets[0]; 




    // HTML Template to create each highlight box

    // <div id="highlightXXX">
    // <a href="#"><img src="XXX" alt="XXX" ></a>
    // <div id="highlightXXX-title">XXX</div>
    // <div id="highlight1-descXXX">XXX</div>
    // </div>



    for(var i = 0; i< myArrLength; i++){
        var html = "";
        var idNumber = i+1;
        var src = myArr[i].src;
        var title = myArr[i].title;
        var desc = myArr[i].desc;
        var href = myArr[i].href;
        var bgRedChannel = 255;
        var bgGreenChannel = 255;
        var bgBlueChannel = 255;

        //****************************************************
        // for ColorThief - remove code block to disable
        img.src = src;
        console.log(img.width); // **this yields width of 0**
        bgColor = colorThief.getColor(img);
        bgRedChannel = bgColor[0];
        bgGreenChannel = bgColor[1];
        bgBlueChannel = bgColor[2];



        // creates the CSS rules for each highlight
        createHighlightCSS(myStyle, idNumber, bgRedChannel, bgGreenChannel, bgBlueChannel);

        // creates the unique containers for each highlight
        html += `<div id="highlight${idNumber}">`;
        html += `<a href="${href}"><img src="${src}" alt="${title}" ></a>`;
        html += `<div id="highlight${idNumber}-title">${title}</div>`;
        html += `<div id="highlight${idNumber}-desc">${desc}</div>`;
        html += `</div>\n`
        document.getElementById("highlights-container").insertAdjacentHTML("beforeend", html);
    }

}
};
xmlhttp.open("GET", highlightsJSON, true);
xmlhttp.send(); 
}

2018-05-22更新：所以我添加了听众，它似乎没有帮助:(。

    function getHighlights(){
console.log("build 2018-05-22 7:13pm")
var colorThief = new ColorThief(); // For colorthief to get average color
var img = document.createElement("img");  // For colorthief to get average color
var highlightsJSON = "highlights.json";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    // var html = "";
    var currentElement = "";
    var myArrLength = myArr.length;

    // loads the current stylesheet as a variable
    var myStyle = document.styleSheets[0]; 




    // HTML Template to create each highlight box

    // <div id="highlightXXX">
    // <a href="#"><img src="XXX" alt="XXX" ></a>
    // <div id="highlightXXX-title">XXX</div>
    // <div id="highlight1-descXXX">XXX</div>
    // </div>



    for(var i = 0; i< myArrLength; i++){

        var idNumber = i+1;
        var src = myArr[i].src;
        var title = myArr[i].title;
        var desc = myArr[i].desc;
        var href = myArr[i].href;
        var bgRedChannel = 255;
        var bgGreenChannel = 255;
        var bgBlueChannel = 255;
        var bgColor;


        // for ColorThief - remove code block to disable
        // creates the unique containers for each highlight
        img.src = src;


        img.addEventListener("load", console.log(img.width));  // instead of console.log I placed bgColor= colorThief.getColor(img) here, and it didn't help. I put the console.log here to debug to see whether it would give a valid width, and unfortunately it didn't :(.

        bgColor = colorThief.getColor(img)
        bgRedChannel = bgColor[0];
        bgGreenChannel = bgColor[1];
        bgBlueChannel = bgColor[2];

        // creates divs only after loaded
        createHighlightHTML(idNumber, href, title, desc, src)


        // creates the CSS rules for each highlight
        createHighlightCSS(myStyle, idNumber, bgRedChannel, bgGreenChannel, bgBlueChannel);


    }

}
};
xmlhttp.open("GET", highlightsJSON, true);
xmlhttp.send(); 
}

编辑2018-05-23 11:49 pm;仍然没有工作:(

    function getHighlights(){
console.log("build 2018-05-23 11:44pm")

var img = document.createElement("img");  // For colorthief to get average color
var highlightsJSON = "highlights.json";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    // var html = "";
    var currentElement = "";
    var myArrLength = myArr.length;

    // loads the current stylesheet as a variable
    var myStyle = document.styleSheets[0]; 


    // HTML Template to create each highlight box

    // <div id="highlightXXX">
    // <a href="#"><img src="XXX" alt="XXX" ></a>
    // <div id="highlightXXX-title">XXX</div>
    // <div id="highlight1-descXXX">XXX</div>
    // </div>



    for(var i = 0; i< myArrLength; i++){

        var idNumber = i+1;
        var src = myArr[i].src;
        var title = myArr[i].title;
        var desc = myArr[i].desc;
        var href = myArr[i].href;
        var bgRedChannel = 255;
        var bgGreenChannel = 255;
        var bgBlueChannel = 255;



        // for ColorThief - remove code block to disable
        // creates the unique containers for each highlight
        img.src = src;


        img.addEventListener("load", createHighlightCSS(myStyle, idNumber, bgRedChannel, bgGreenChannel, bgBlueChannel, img));

        // creates divs only after loaded
        createHighlightHTML(idNumber, href, title, desc, src);



        // creates the CSS rules for each highlight




    }

}
};
xmlhttp.open("GET", highlightsJSON, true);
xmlhttp.send(); 
}

    function createHighlightCSS(myStyle, idNumber, bgRedChannel, bgGreenChannel, bgBlueChannel, img){
var widthAndHeight = "300px";
var titleFontSize = "1.6em";
var colorThief = new ColorThief(); // For colorthief to get average color
bgColor = colorThief.getColor(img)
bgRedChannel = bgColor[0];
bgGreenChannel = bgColor[1];
bgBlueChannel = bgColor[2];
console.log(bgColor);
...

Answer 1

我有两个问题需要澄清，但由于我不能在这里写评论，所以我会给出答案。

您确定highlights.json的路径是否正确？（虽然，我猜是）
当您制作img元素并将其设置为src时，需要首先加载某些内容。也许，您的图像不会立即加载，这就是您获得img.width = 0的原因，并且从那里一切都会失败，如您所说。加载完{-1}}后，img个元素会触发load个事件。

更新回答评论问题

这样做的一种方法是等待加载所需的图像，然后做你的事情。我将举一个匿名函数的例子，虽然它肯定不会很漂亮，但你会得到这个想法。

img.addEventListener('load', func...

javascript img DOM不在github.io上工作但在本地工作

1 个答案:

更新回答评论问题