Question

如何从大量图像的参数设置SRC？

我有5个链接，如

<span onclick="showim('http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg');">Show Image 1</span>
<span onclick="showim('img2.jpg');">Show Image 2</span>
<span onclick="showim('img3.jpg');">Show Image 3</span>
<span onclick="showim('img4.jpg');">Show Image 4</span>
<span onclick="showim('img5.jpg');">Show Image 5</span>

只有一个图片占位符

<img src="" id="implace" width="100" />

而且，这样的JS代码

$(document).ready(function () {
     $(function showim(imid) {
         var src = $("implace").attr("src").match(/[^\.]+/) + imid;
         $("#implace").attr("src", src);
     });
});

如何使此代码生效？无法理解为什么它不起作用。感谢

JSFiddle链接：http://jsfiddle.net/yessx/

Answer 1

为每个范围放置一个类，并添加属性数据：

    <span class="spanClick" data-image="http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg">Show Image 1</span>
    <span class="spanClick" data-image="img2.jpg">Show Image 2</span>
    <span class="spanClick" data-image="img3.jpg">Show Image 3</span>
    <span class="spanClick" data-image="img4.jpg">Show Image 4</span>
    <span class="spanClick" data-image="img5.jpg">Show Image 5</span>

在你的js中：

$(document).ready(function(){
  $(".spanClick").bind("click",function(){
      var src = $(this).data("image");

      $("#implace").attr("src",src);
  });
});

调用jquery文件时不要忘记调用jquery-migrate文件，导致函数“bind”在所有jquery版本中都不起作用

Answer 2

从这里开始：http://jsfiddle.net/52dY7/

需要使该功能成为全局功能，并确保使用＃来选择ID。

示例JS：

$(document).ready(function () {
    window.showim = function(src) {
        $("#imgLoader").attr("src", src);
    };
});

如果要将其排队，直到加载图像本身，请点击此处查看快速示例：http://jsfiddle.net/52dY7/3/

$(document).ready(function () {
    var $loader = $('#imgLoader');

    window.showim = function(src) {
        var $im = $('<img/>');
        $im.attr('src', src);

        $loader.addClass('loading');
        $im.one('load', function() {
            $loader.removeClass('loading').attr('src', src);
        });
    };
});

Answer 3

最好将图像预加载到隐藏的img容器中，然后在用户点击跨度时显示它们。

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

function showim(imid) {
//where imid is now the array index
$("#implace").append(arrayOfImages[imid]);
}

jQuery函数参数为图像设置SRC

3 个答案: