Question

我希望点击拇指以使用预加载器显示更大的图像，然后在加载完成后显示淡入。

我几乎要感谢this answer - 它可以根据点击的拇指加载不同的图像 - 而this guide可以对加载位进行分类。

结合这两个我有以下脚本：

 <script type="text/javascript">
    <!--
    $(function () {
        $('img[id^="thumb"]').click(function () {
        $('#loader').show();
        var id = $(this).attr('id').replace('thumb', '');
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).attr('src', 'photos/1.jpg');
    }); });

    //-->
    </script>

最后你会注意到.attr源固定在一个图像上。我想要的是'.jpg'之前的数字会根据拇指的ID而改变（它们标记为：'thumb1'，'thumb2'等。）

有没有办法做到这一点？非常感谢！

PS This answer似乎很接近，但我遇到的问题是，在脚本中，拇指ID似乎太早，以至于无法使用这些简单的解决方案。

Answer 1

<script type="text/javascript">

    $(function () {
        $('img[id^="thumb"]').click(function () {
        var thumbId = $(this).attr('id').substring(5); // assuming the id of the thumb is like "thumb1", "thumb2", ...
        $('#loader').show();
        var id = $(this).attr('id').replace('thumb', '');
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).attr('src', 'photos/' + thumbId + '.jpg');
    }); });


    </script>

Jquery根据点击的div的ID更改图像源

1 个答案: