Question

我已经完成了一个脚本，该脚本为特定网址创建模式，然后加载图片内容。我想知道是否有办法使这段代码更加健壮，即使所有内容都存在，页面也会不断加载。

非常感谢任何帮助。

function displayContent() {
    document.getElementById("findCar").onsubmit = function () {
        var registration = document.getElementById("regPlate").value,
            reference = document.getElementById("stockRef").value;
        var regArray = registration.split(''),
            refArray = reference.split(''),
            referenceNinth = refArray[10];
        reverseReg = regArray.reverse();
        var obfuscated = new Array();
        var obf_index = 0;
        for (i = 0; i <= 6; i++) {
            obfuscated[obf_index] = refArray[i];
            obf_index++;
            obfuscated[obf_index] = reverseReg[i];
            obf_index++;
        }
        obfuscated.push(referenceNinth);
        obfuscatedString = obfuscated.join("");
        var camera = new Array();
        var cameraSize = "350";
        var cam_index = 0;
        for (i = 0; i <= 1; i++) {
            if (i > 0) cameraSize = "800";
            camera[cam_index++] = cameraSize + "/f";
            camera[cam_index++] = cameraSize + "/i";
            camera[cam_index++] = cameraSize + "/6";
            camera[cam_index++] = cameraSize + "/5";
            camera[cam_index++] = cameraSize + "/4";
            camera[cam_index++] = cameraSize + "/r";
        }
        for (i = 0; i <= 11; i++) {
            document.write("<img src='http://imagecache.arnoldclark.com/imageserver/" + obfuscatedString + "/" + camera[i] + "'/>");
        }

    };
}

Answer 1

编辑：要防止页面重新加载，您需要阻止onsubmit处理程序中的默认表单提交。请参阅我的回答中的信息，了解如何执行此操作。

当您在已加载的文档上调用document.write()时，它会清除上一个文档的内容并开始编写一个新文档，这可能会导致“连续加载”的印象。你提到的。如果这不是您想要的行为，那么您应该通过直接插入新的DOM节点而不是使用document.write()来动态地将图像内容添加到页面中。

你可以通过替换它来做到这一点：

    for (i = 0; i <= 11; i++) {
        document.write("<img src='http://imagecache.arnoldclark.com/imageserver/" + obfuscatedString + "/" + camera[i] + "'/>");
    }

有这样的事情：

    for (i = 0; i <= 11; i++) {
        var img = new Image();
        img.src = 'http://imagecache.arnoldclark.com/imageserver/" + obfuscatedString + "/" + camera[i] + "'
        document.body.appendChild(img);
    }

有关重写/重新组织代码以获得更好代码的帮助，http://codereview.stackexchange.com网站应该是那些类型的问题。另外，对于有意义地帮助您的人，您可能需要描述您使用前30行代码实际尝试实现的内容，因为他们的目的不是很明显并且理解可能有用了解如何简化实施。

可能导致页面重新加载的其他内容：

按下按钮提交表单
window.location。
页面HTML中的元刷新数据
点击您想要使用JS处理的链接，但是您不能阻止跟踪该链接的默认行为。

我现在看到你的事件处理程序是onsubmit。这可能意味着您正在提交表单。如果您将（e）作为参数添加到处理程序中，则可以使用e.preventDefault()来阻止表单提交并导致页面重新加载。

由于您只是使用纯JavaScript，因此您也可以return false处理onsumbit来阻止表单提交。

强大的Javascript代码

1 个答案: