предварительно загрузить изображение и показать спиннер во время загрузки - PullRequest
Новая
       12

предварительно загрузить изображение и показать спиннер во время загрузки

2 голосов
/ 19 апреля 2010

Hy,

Я использую uploadify для загрузки некоторых изображений, после того как я отображаю все большие пальцы изображений в списке, когда я нажимаю на большой палец изображения, оно открывается в div с этой функцией 

$(".thumbs li a").click(function(){
    var largePath = $(this).attr("href");
    $('.thumbs li').removeClass('thumbac');
    $(this).parent().addClass('thumbac');
    $("#largeImg").attr({ src: largePath });
    return false;
});

вот мой список фотографий: 

<div class="upimage">
  <ul id="upimagesQueue" class="thumbs">
    <li id="liupimages">
      <a href="uploads/0001.jpg"><img src="uploads/0001.jpg" alt="0001.jpg" id=""></a>
    </li>
    <li id="liupimages">
      <a href="uploads/0002.jpg"><img src="uploads/0002.jpg" alt="0002.jpg" id=""></a>
    </li>
    <li id="liupimages">
      <a href="uploads/0003.jpg"><img src="uploads/0003.jpg" alt="0003.jpg" id=""></a>
    </li>
<script>
$(".thumbs li a").click(function(){
    var largePath = $(this).attr("href");
    $('.thumbs li').removeClass('thumbac');
    $(this).parent().addClass('thumbac');
    $("#largeImg").attr({ src: largePath });
    return false;
});
</script>
  </ul>
</div>

это div, в котором появляются изображения 

<div class="largeImg" >     
    <img id="largeImg" src="" />
</div>

как я могу предварительно загрузить изображение перед его отображением?

Ответы [ 3 ]

3 голосов
/ 19 апреля 2010

Вы можете каким-то образом использовать событие load, например ::1004 

$(".thumbs li a").click(function(){
    var largePath = $(this).attr("href");
    $('.thumbs li').removeClass('thumbac');
    $(this).parent().addClass('thumbac');
    $("#largeImg").hide()
                  .attr({ src: largePath })
                  .load(function() {
                       $(this).show();
                   });
    return false;
});
0 голосов
/ 10 июня 2011

Вы можете использовать мой плагин imgPreload , который при предварительной загрузке изображения отображает хороший счетчик.

В вашем случае вам просто нужно добавить одну строку в существующий код: 

$("#largeImg").attr({ src: largePath }); //your code
$("#largeImg").imgPreload() //the extra line

Пожалуйста, смотрите эту страницу http://denysonique.github.com/imgPreload/ для демонстрации и документации.

0 голосов
/ 19 апреля 2010

вот как вы можете предварительно загрузить изображения в формате jq: 

    (function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

и затем вы предварительно загружаете их так: 

jQuery.preLoadImages("image1.gif", "/path/to/image2.png");
...