Question

这是另一个问题的延续：jquery automatic image reload on src attribute update?

使用下面的代码，我得到一个新的图像src位置的AJAX GET调用，即使图像似乎不在DOM中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready( function(){
            $('#button').click( function(){
                var $container = $('#container');
                var string = $container.html();
                string = string.toString();
              var $string = $(string);
                $string.attr('src', 'foo');
            });
        });
    </script>
</head>
<body>
    <div id='container'><img src='pointIcon.png'/></div>
        <button id='button'>Go!</button>
</body>
</html>

关于如何在不触发AJAX调用的情况下操作$ string对象的任何想法？尝试了.toString（）,. stopPropogation（），到目前为止没有运气......

Answer 1

您可以尝试将其包装在＆lt; div style ='display：none'＆gt;因此，当您将字符串解析为DOM元素时，它不可见，这可能会阻止浏览器加载图像。如果没有，你将不得不使用字符串操作而不是jQuery来操纵它，因为$（字符串）将为你创建DOM元素，导致创建图像然后请求图像

Answer 2

尝试：

var string=$("#container img");
string.attr('src', 'foo');

而不是：

var string = $container.html();
string = string.toString();
var $string = $(string);
$string.attr('src', 'foo');

演示：http://jsbin.com/igitox/1/edit

Answer 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready( function(){
            $('#button').click( function(){
                var image = $('#container img');
                image.attr('src', 'foo');
            });
        });
    </script>
</head>
<body>
<div id='container'><img src='pointIcon.png'/></div>
    <button id='button'>Go!</button>
</body>
</html>

在没有AJAX get请求的情况下更改图像的src属性

3 个答案: