Javascript fancybox图像有时会在框外渲染

编辑：可以在此处看到问题：。这种情况只发生了1/15次，但还是太频繁了

我有以下django模板：

<script type="text/javascript" src="{{ STATIC_URL }}js/ 
jquery.fancybox-1.3.4.pack.js"></script> 
<link rel="stylesheet" href="{{ STATIC_URL }}css/ 
jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 
{% include "submission-form.html" with section="photos" %} 
<div class="commentables"> 
        {% load thumbnail %} 
    {% for story in objects %} 
            <div class="image {% if forloop.counter|add:"-1"| 
divisibleby:picsinrow %}left{% else %}{% if forloop.counter| 
divisibleby:picsinrow %}right{% else %}middle{% endif %}{% endif %}"> 
                {% if story.image %} 
                    {% thumbnail story.image size crop="center" as full_im %} 
                                <a rel="gallery" href="{% url post slug=story.slug %}"> 
                                <img class="preview" {% if story.title %} 
alt="{{ story.title }}" {% endif %} src="{{ full_im.url }}" full- 
image="{% if story.image_url %}{{ story.image_url }}{% else %} 
{{ story.image.url }}{% endif %}"> 
                                        </a> 
                    {% endthumbnail %} 
                {% else %} 
                        {% if story.image_url %} 
                            {% thumbnail story.image_url size crop="center" as 
full_im %} 
                                <a rel="gallery" href="{% url post slug=story.slug %}"> 
                                        <img class="preview" {% if story.title %} 
alt="{{ story.title }}" {% endif %} src="{{ full_im.url }}" full- 
image="{{ story.image_url }}"> 
                                                </a> 
                            {% endthumbnail %} 
                        {% endif %} 
                {% endif %} 
        </div> 
    {% endfor %} 
        {% if rowid != "last" %} 
        <br style="clear: both" /> 
        {% endif %} 
    {% if not no_more_button %} 
    <p style="text-align: right;" class="more-results"><a href="{% url 
images school_slug tag_slug %}">more...</a></p> 
    {% endif %} 
</div> 
<script> 
    $(document).ready(function(){ 
        function changeattr(e){ 
            var f = $(e.clone()); 
            $(f.children()[0]).attr('src', $(f.children() 
[0]).attr("full-image")); 
            $(f.children()[0]).attr('height', '500px'); 
            return f[0].outerHTML; 
        } 
        $('.image a').each(function(idx, elem) { 
          var e = $(elem); 
          e.fancybox({ 
              title: $(e.children()[0]).attr('alt'), 
          content: changeattr(e) 
            }); 
        }); 
    }); 
</script> 

我偶尔会在盒子会显示的地方出现奇怪的显示错误 要么根本不渲染任何内容，这样它就会显示为一个薄的 白色条，基本上，或者它将只渲染约30像素宽，和 将自己放在页面的中间位置。在这两种情况下，如果我检查 元素，我可以看到全图的阴影，在右边 大小，使用正确的url

图像来源似乎没有什么不同，我没有得到任何答案 错误，这在chrome和firefox中都会发生。 有人有什么想法吗

编辑：混乱框上的视图选择源提供

<div id="fancybox-outer"><div class="fancybox-bg" id="fancybox-bg-n"></div><div class="fancybox-bg" id="fancybox-bg-ne"></div><div class="fancybox-bg" id="fancybox-bg-e"></div><div class="fancybox-bg" id="fancybox-bg-se"></div><div class="fancybox-bg" id="fancybox-bg-s"></div><div class="fancybox-bg" id="fancybox-bg-sw"></div><div class="fancybox-bg" id="fancybox-bg-w"></div><div class="fancybox-bg" id="fancybox-bg-nw"></div><div style="border-width: 10px; width: 165px; height: auto; opacity: 1;" id="fancybox-content"><div style="width: auto; height: auto; overflow: auto; position: relative;"><a rel="gallery" href="/post/shit-is-about-to-get-real/">
                            <img class="preview" alt="shit IS about to get real" src="http://i.imgur.com/Le8Kv.jpg" full-image="http://i.imgur.com/Le8Kv.jpg" height="500px">
                        </a></div></div><a style="display: inline;" id="fancybox-close"></a><a style="display: inline;" href="javascript:;" id="fancybox-left"><span class="fancy-ico" id="fancybox-left-ico"></span></a><a style="display: inline;" href="javascript:;" id="fancybox-right"><span class="fancy-ico" id="fancybox-right-ico"></span></a></div>

---

关于图像和javascript问题，我的第一个建议是确保javascript知道图像的大小。设置尺寸、宽度和高度，然后查看问题是否得到解决

而不是所有这些代码。在你的网页上查看源代码，然后发布。这个问题和这个问题之间有什么关系？你发布的问题是如何在弹出窗口中显示正确的内容？这一个是现在我在弹出窗口中有了正确的东西，我如何使弹出窗口始终正确加载？我关心的是设置一个特定的大小，我不希望较小的图像被拉伸。对不起，这不是暗示你应该拉伸它，我只是想知道，如果将图像尺寸设置为加载时的尺寸，是否可以解决问题。如果这解决了渲染问题，那么我们可以讨论需要进行哪些CSS调整来修复布局。ok。我应该在哪里设置图像大小？e、 g.通过js，作为图像标记本身上的属性，作为css属性..？图像标记本身上的属性。这样，在加载图像之前，浏览器就已经知道图像的尺寸了。好的，可以了。谢谢那么你在说什么css调整呢？