我已经完成了一个脚本,该脚本为特定网址创建模式,然后加载图像内容。我想知道是否有一种方法可以使该代码更加健壮,并且即使所有内容都存在,页面也会不断加载。
非常感谢任何帮助。
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] + "'/>");
}
};
}
最佳答案
编辑:为了防止页面重新加载,您需要防止 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,因此您也可以从 onsumbit
处理程序返回 false
来阻止表单提交。
关于javascript - 健壮的 JavaScript 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22797199/