如何在 JavaScript 中缓存属性的值？

Question

我正在尝试传递src 和rel 标记值。这是示例输入。

<img class="image" src="example.jpg" title="" rel="value" />

以下是解析页面上所有<img> 标记的一些代码。

add: function(src, rel) {
    if (this.cache[src]) {
        return this.cache[src];
    }
        if (this.cache[rel]) {
            return this.cache[rel];
        }
    var image = new Image();
    image.src = src;
        image.rel = rel;
    this.setStyle(image, {display: 'block'});
    if (image.complete && image.width) {
        return image;
    }
    image.onload = (function(scope) {
        return function() {
            scope.cache[src] = image;
        };
    })(this);
        jQuery(image).attr('rel', function() { image.rel } );
    return image;
},

但是，这是我的输出。

<img src="example.jpg" style="display: block;" />

就好像它完全忽略了rel 标签。我需要将rel 标签值从旧的<img> 传递给新的<img>。

Answer 1

代码正在设置属性。不确定，但如果 rel 属性没有映射到属性，它就不会显示。

jQuery 还稍微混淆了属性和属性之间的区别，所以我不确定它如何处理 rel。

设置rel 时，添加setAttribute() 调用。

var image = new Image();
image.src = src;
image.rel = rel;
image.setAttribute('rel',rel);

您的原始代码确实会设置 rel 属性，但不会设置属性。这实际上会设置属性。

你应该可以摆脱这条线：

jQuery(image).attr('rel', function() { return image.rel } );

---

编辑：

这是一个替代解决方案：

看来如果你先设置image.rel = rel;，那么jQuery就没有效果了。去掉那一行，jQuery 代码就可以工作了。