Jquery图像加载取消答案

【问题标题】：Jquery image loading canceledJquery图像加载取消
【发布时间】：2013-09-18 07:26:46
【问题描述】：

我正在使用 shadowbox 打开弹出窗口。在弹出窗口上完成工作后，我在父页面上附加一行，然后按照代码中的操作关闭影子框。

var row$ = $("<tr id='"+data.entityContactId+"'>");
row$.append("<td align='left' valign='top'>"+data.entityContactId+"</td>");
row$.append("<td align='left' valign='top'>"+data.fName+"</td>");
row$.append("<td align='left' valign='top'>"+data.mName+"</td>");
row$.append("<td align='left' valign='top'>"+data.lName+"</td>");
row$.append("<td align='left' valign='top'>"+data.functionalRole+"</td>");
row$.append("<td align='left' valign='top'>"+data.designation+"</td>");
row$.append("<td align='left' valign='top'>"+data.status+"</td>");
row$.append("<td align='left' valign='top'><a rel='shadowbox[]; width=1000; height=565;' 
        href='../contactDetails/contactDetails.html?entityContactId="+entityContactId+"&companyId="+entityId+"&companyCode="+entityCode+'>
        <img src='http://26fc614be383109f4ed8-83b958a355d4ec1f6468075626f4c2ef.r23.cf1.rackcdn.com/edit.png' title='View Contact'/></a></td>");
                         ...... more code for appending 2 more images...
window.parent.$("#"+rowID+"").replaceWith(row$);
window.parent.Shadowbox.setup();
window.parent.Shadowbox.close();

功能方面一切都很好，父页面的表格中附加了一行。但是图像没有附加在页面上。我更深入地研究它，发现请求正在被 jquery 取消或如下文件所示。！

抱歉，由于声誉问题，无法发布图片。

但我可以发布按 f12 后出现的 chrome 的网络选项卡。

路径 --> 方法 --> 状态 --> 类型 --> 发起者

/edit.png--> 获取-->（取消）待处理--> jquery-1.10.js6569

有什么办法可以解决这个问题吗？？

【问题讨论】：

您是否尝试过进入调试器找出问题所在？
我已经更新了问题中的图片，我在追加时遇到的错误已经完成。

标签： javascript jquery shadowbox

【解决方案1】：

在添加包含图像的行时，引号和双引号（' 和 "）的打开和关闭出现问题。

我要再写一遍：

row$.append("<td align='left' valign='top'><a rel='shadowbox[]; width=1000; height=565;' 
    href='"../contactDetails/contactDetails.html?entityContactId="+entityContactId+"&companyId="+entityId+"&companyCode="+entityCode'>
    <img src='http://26fc614be383109f4ed8-83b958a355d4ec1f6468075626f4c2ef.r23.cf1.rackcdn.com/edit.png' title='View Contact'/></a></td>");

如果还有其他类似的行，你也需要修改它们。

我所做的是：我在 "../contactDetails/cont..." 之前添加了一个双引号 (")，并在 "entityCode" 之后删除了一个 +。

编辑

这与您的示例类似。我试过了，效果很好。

<!DOCTYPE HTML>
<html>
<head>
<title>Show Image Dimensions Locally</title>
<style type='text/css'>
    body {
        font-family: sans-serif;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        console.log("document is ready");
        var $row = $("<tr id='newrow'>");
        $row.append("<td align='left' valign='top'><img src='http://eofdreams.com/data_images/dreams/image/image-03.jpg' title='Image' style='max-width: 400px; max-height:200px' /></td>");
        $row.append("<td>New Text 1</td>");
        $row.append("<td>New Text 2</td>");
        $row.append("<td>New Text 3</td>");
        $row.append('</tr>');
        window.parent.$("#row").replaceWith($row);
    });

</script>
</head>

<body>
<table>
    <thead>
        <tr>
            <th>Image</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Columt 3</th>
        </tr>
    </thead>

    <tbody>
        <tr id="row">
            <td>Image goes here</td>
            <td>Text 1</td>
            <td>Text 2</td>
            <td>Text 3</td>
        </tr>
    </tbody>
</table>
</body>


</html>

我不知道你这边有什么不同。如果你愿意，可以试试这段代码，如果它有效，请与你的代码进行比较。

【讨论】：

Hey Fraximus，这是一个示例代码，我在这里对其进行了修改以使其更具可读性，否则代码工作正常。
我加了一段和你的代码类似的代码，在我这边试了一下。它正在工作。我无法确定代码中的问题出在哪里。我的代码和你的有区别吗？
嘿 Fraximus，您正在将表格行附加到同一页面上，但我正在使用阴影框生成一个弹出窗口，然后从该弹出窗口中我将这一行发送到父页面。
那我现在就深入研究一下shadowbox，当我找到东西时会更新你。