Question

我有一个缩略图列表，所有这些都有'rel'属性，它是更大尺寸的同一图像的来源。我的功能很简单，如果你点击缩略图，它的大小会加载到容器中。我需要您反馈的代码中有趣的部分是：

变量：

'event.data.cImg'是我要更新的容器中的较大图像 'event.data.cImgWrap'是较大图像的容器 '$（this）'是点击的缩略图

event.data.cImg.attr('src', $(this).attr("rel"));

  if (event.data.cImg.complete != 'true') {

      event.data.cImgWrap.css('opacity', '0.7');

      event.data.cImg.load(function() {
          event.data.cImgWrap.css('opacity', '1');
      });
  }

那么我的代码的缺点是什么？

对不起我的英语，我不是母语人士并提前致谢！

Answer 1

并非所有浏览器都支持图片的complete属性。

我建议在更改load之前设置opacity处理程序和src。然后，更改src。如果图片已在缓存中，则会立即触发load事件，将不透明度设置回1。一切顺利，用户将无法看到不透明度变化，因为它比屏幕刷新更快。

Answer 2

我想不出你想用ajax加载图像的一个原因，除非图像作为base64编码数据直接存储在数据库中（并不是每个浏览器都支持数据网址）。 DOM已经拥有了“监控”图像加载所需的一切，那么使用ajax获取图像有什么意义呢？一个简单的GET http请求就可以了。

你唯一能使用ajax的是通过webservice从图像列表中获取图像url和metadatas（如title等）... 如前所述，到处都不支持complete事件。

这种方法请求图像而不是AJAX有多糟糕？

2 个答案: