3

我正在使用 Imagekit。View.py 包括：

def pics(request):
    p = Photo.objects.all()
    return render_to_response('Shots.html',
            {'p': p})

模板中的以下简单代码将生成关联图像：

{% for p in p %}
<img src = "{{ p.display.url }}">
<img src = "{{ p.thumbnail_image.url }}">    
{% endfor %}

我正在尝试生成一系列缩略图 {{ p.thumbnail_image.url }}，当鼠标悬停时，将通过 Javascript 生成稍大的图像版本 {{ p.display.url }}。模板中的以下代码尝试这样做：

<html>
<head>
<HEAD>

<script 
language="Javascript"> 
{ image1 = new Image 
image2 = new Image 
image1.src = {{  p.thumbnail_image.url }}             
image2.src = {{ p.display.url }}
</script>
</head>
<body>

{% for p in p %}
<a href=""
onMouseOver="document.rollover.src=
image2.src  
onMouseOut="document.rollover.src=
image1.src"> 
<img src="{{ p.thumbnail_image.url }}" border=0 name="rollover"></a>
{% endfor %}
</body>
</html>

这将显示一系列缩略图，但鼠标悬停时不会显示较大的图像。我相信这与我指定变量 {{ p.display.url }} 的方式有关。

4

2 回答 2

1

我清理了你的代码，但正如@fish2000 提到的，这仍然是一种肮脏的方式。我想出了以下内容：

<html>
<head>

<script>
var thumbs = [];
var hovers = [];

{% for p in p %}
thumbs.push(new Image());
thumbs[thumbs.length - 1].src = p.thumbnail_image.url;
hovers.push(new Image());
hovers[hovers.length - 1].src = p.display.url;
{% endfor %}

</script>
</head>
<body>

{% for idx, p in enumerate(p) %}
<a href=""> 
    <img src="{{ p.thumbnail_image.url }}" border=0 name="rollover" onmouseover="this.src = window.hovers[{{ idx }}].src" onmouseout="this.src = window.thumbs[{{ idx }}].src">
</a>
{% endfor %}
</body>
</html>

我在 JSFiddle 上写了一个基本示例来尝试模拟你的 Python 代码将产生什么：http: //jsfiddle.net/TeEHU/

为了稍微解释一下我做了什么，我在开始时设置了几个 JavaScript 数组来保存缩略图和悬停。最初，我只是想让它们成为引用 URL 的字符串数组，但遵循您使用 Image 对象预加载图像悬停的方式。

从这里开始，我摆脱了您在锚标记中定义的事件处理程序属性，并将其移至图像标记，因此当用户将鼠标悬停在图像上时，我们可以直接访问图像属性。

我通常不会容忍使用从服务器端生成动态 JavaScript，但我只是试图与您的代码保持一致。

于 2012-03-24T17:26:44.473 回答
0

看起来您的 JavaScript 一般有点粗糙——一些特定的例如：

  • 您正在标签中使用折旧的language参数；<script>
  • 您在第一个脚本块的顶部有一个看起来像未闭合的括号
  • 我不知道您是否可以像您所做的那样引用您在onmouseover/标签中声明的变量；onmouseout

通常，您在标签或参数值之类的中间有换行符，这些可能是合法的（我不确定）但它们的价值值得怀疑，至少对我来说是这样；他们让我无法理解你在做什么。考虑删除它们。

另外：通常，您对引号的使用是一团糟……相信我，如果您清理它们，您会更好地理解自己的代码。

但是，在您的情况下，主要的事情应该是：查看呈现给浏览器的代码以解决您的 JavaScript 问题。首先也是最重要的。这将缩小您寻求压缩的特定错误是否是由于您的模板语法/逻辑/等，而不是您的客户端 JavaScript。无论如何，这本身并不是一个 django 问题。

于 2012-03-24T15:08:21.187 回答