用於設置圖像SRC的jQuery函數參數

我有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/

來源

2014-01-27 lock

而不是改變的SRC，爲什麼不隱藏/顯示圖像？然後，您不必等待加載圖像。 – ShadowCat7

選擇器應該是'＃implace'而不是'implace'。 – zaquest

@zaquest - 謝謝，但仍無法使用，請檢查jsfiddle鏈接。謝謝 – lock

把它從這裏：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); 
     }); 
    }; 
});

來源

2014-01-27 22:09:44

）沒有必要在'document.ready（）'裏面放置'showim'函數，實際上， 'document.ready（）'在這個問題中是不需要的，只需在全局範圍內定義'showim'函數。 – jfriend00

感謝，簡單而有效的代碼。另外感謝jsfiddle。:) – lock

可以請你告訴如何加載實際圖像加載時的Ajax Loader圖像？由於實際圖像是高質量的圖像，並且需要一段時間才能加載，與此同時我想顯示一個jax loader gif圖像，以使人們瞭解他們需要等待。謝謝 – lock

你會好起來的預加載圖像轉換成隱藏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]); 
}

來源

2014-01-27 22:08:32 Mike

的確如此，但是在後期階段需要改變許多領域以增加更多的圖像。截至目前，我們有超過50個展示。 – lock

爲什麼不使用['$ .each（）']（http://API.jquery.com/jquery.each/）？ –

你可以一般地編碼，並遞歸加載圖像...我沒有看到問題。 – Mike

將一個類每個跨度，和添加屬性數據：

<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的遷移文件，導致函數「綁定」不工作在所有的jQuery版本

來源

2014-01-27 22:18:37

用於設置圖像SRC的jQuery函數參數

回答

相關問題