javascript - 根据 URL 加载图片到 div

Question

我目前有一个包含许多缩略图的页面。当用户单击其中一个缩略图时，该图像的较大版本将加载到一个 div 中。我用来执行此操作的 JQuery 是:

$(document).ready(function() {
  $('a.sigProBettonLink').click(function () {
    var url = $(this).attr('href'),
    image = new Image();
    image.src = url;
    image.onload = function () {
    $('.itemImage').empty().append(image);
    };
    image.onerror = function () {
      $('.itemImage').empty().html('That image is not available.');
    }
    $('.itemImage').empty().html('Loading...');
    return false;
  });
});

我想保留此功能，但要添加它。我已经设置了站点，以便 URL 页面可以有许多变量，具体取决于用户到达该页面的方式。例如

http://www.mysite/mypage?image=1
http://www.mysite/mypage?image=2
http://www.mysite/mypage?image=3

基本上，如果 URL 是 http://www.mysite/mypage?image=1 然后我想要加载第一个图像(就好像用户点击了第一个缩略图)。如果 URL 是 http://www.mysite/mypage?image=2 然后我希望第二张图片加载到 div 中(就像用户点击了第二张缩略图一样)等等。

Answer 1

这是使用 jQuery 的方法的原型(prototype)代码:

作为演示，我使用了以下 HTML 代码段:

<a class="sigProBettonLink" href="http://placekitten.com/50/100">Image 1</a><br>
<a class="sigProBettonLink" href="http://placekitten.com/100/100">Image 2</a><br>
<a class="sigProBettonLink" href="http://placekitten.com/150/100">Image 3</a>

<div class="itemImage"></div>

这里是 jQuery:

$(document).ready(function () {
    var pathname = window.location.pathname;
    if (pathname.contains("image1")) {
        var urlvalue = $('a.sigProBettonLink').get(0);
    }
    if (pathname.contains("image2")) {
        var urlvalue = $('a.sigProBettonLink').get(1);
    }
    if (pathname.contains("image3")) {
        var urlvalue = $('a.sigProBettonLink').get(2);
    }
    image = new Image();
    image.src = urlvalue;
    image.onload = function () {
        $('.itemImage').empty().append(image);
    };

    $('a.sigProBettonLink').click(function () {
        var url = $(this).attr('href');
        image = new Image();
        image.src = url;
        image.onload = function () {
            $('.itemImage').empty().append(image);
        };
        image.onerror = function () {
            $('.itemImage').empty().html('That image is not available.');
        }
        $('.itemImage').empty().html('Loading...');
        return false;
    });
});

使用 window.location.pathname 获取 URL，然后使用 native JavaScript .contains() 方法检查图像名称。

演示代码位于:http://jsfiddle.net/audetwebdesign/sdQTv/

要查看功能的工作情况，请尝试:http://jsfiddle.net/audetwebdesign/sdQTv/show/image2

如果您在 URL 中使用名称-值对 (?image=1)，您可能需要调整解析。

有关解析 URL 的信息和示例，请参阅:
https://developer.mozilla.org/en-US/docs/Web/API/window.location

但是，这个例子说明了基本方法。