Question

我已经编写了一个代码，您可以在其中选择图像，当您单击其中一个图像时，它会显示在另一个占位符中：

home.php

<div id="templates" class="row">
            <?php
            while ($one = $templates->fetch()) {
                ?>
                <div class="col-xs-3 col-md-2">
                    <a  class="thumbnail" data-price="<?= $one['price'] ?>" data-id="<?= $one['id'] ?>">
                        <img id="imgTemp" onclick="changeImage('../files/templates/blank/<?echo($one['id'])?>.jpg');changeSize();" src="/files/templates/example/<?= $one['id'] ?>.jpg" alt="<?= $one['titlep'] ?>">
                    </a>
                </div>
            <?php
            }
            ?>
        </div>
        <div>
            <img id="imgDisp" src="../files/test/red-panda.jpg" alt="Red panda" class="mask" datamask="../files/test/1.png">
        </div>

使用以下两个功能加载这些图像：

function changeImage(imgName)
{
    image = document.getElementById('imgDisp');
    image.src = imgName;
}

function changeSize()
{
    document.getElementById('imgDisp').setAttribute("datamask","../files/test/2.png");
}

changeImage 用于获取所选图像并将其放入新div中，而 changeSize 用于设置属性“datamask”。另外，数据掩码由 canvasmask.js 中的另一个脚本使用，并在图像上设置掩码（例如正方形，三角形等）。现在，当我选择一个图像时，不会应用任何掩码，猜测 canvasmask.js 中的函数是在其他函数之前执行的。可以这样做，以便在之后执行吗？

Answer 1

尝试执行changeSize（）作为changeImage的回调。如果你不知道该怎么做，那就有一个非常好的tuto：

https://stackoverflow.com/a/2190872/2602940

在加载另一个脚本后执行或重新加载脚本

1 个答案: