Question

在this website of mine中，我添加了一个图片库，可以在整个灯箱上显示文档的图像。

这对我有好处，但不是图像加载的方式。正如你所看到的，当你在同一时间碰到其中一个时，所有的图像都被加载到了，这真的会减慢这个过程。（当你正在观看正在加载的图像时 - 用空的年代，试着去上一个或下一个，你会得到我的意思）。

我想出两个解决方案：

- 在点击之前加载所有图像。 - 每次加载一张图片。

这里你是图片库的核心：

jQuery(window).load(function() {

// global variables for script
var current, size;

$('.go').click(function(e) {

  // prevent default click event
  e.preventDefault();

  // grab href from clicked element
  var image_href = $(this).attr("href"); 

  // determine the index of clicked trigger
  var slideNum = $('.go').index(this);

  // find out if #lightbox exists
  if ($('#lightbox').length > 0) {        
    // #lightbox exists
    $('#lightbox').fadeIn(300);
    // #lightbox does not exist - create and insert (runs 1st time only)
  } else {                                
    // create HTML markup for lightbox window
    var lightbox =
        '<div id="lightbox">' +
          '<p>Chiudi X</p>' +
          '<div id="imgtext">'+
          '</div>'+
          '<div id="slider">' +
            '<div class="nav">' +
              '<a class="prev slide-nav"><</a>' +
              '<a class="next slide-nav">></a>' +
            '</div>' +
          '</div>' +
        '</div>';

    //insert lightbox HTML into page
    $('body').append(lightbox);

    // fill lightbox with a hrefs in .gallery
    $('.nogallery').find('a').each(function() {
      var $href = $(this).attr('href');
      $('#slider').append('<img src="' + $href + '">');
    });

    // fill lightbox/imgtext with alt attributes of a > img in .gallery
    $('.nogallery').find('a > img').each(function() {
      var $alt = $(this).attr('alt');
      $('#imgtext').append('<p>' + $alt + '</p>');
    });   
  }

  // setting size based on number of objects in slideshow
  size = $('#slider img').length;

  // hide all slide, then show the selected slide
  $('#slider img').hide();
  $('#slider img:eq(' + slideNum + ')').show();

  $('#imgtext p').hide();
  $('#imgtext p:eq(' + slideNum + ')').show();

  // set current to selected slide
  current = slideNum;

  $('.nav').fadeIn(300);

});

//Click anywhere on the page to get rid of lightbox window
$('body').on('click', '#lightbox', function() { // using .on() instead of .live(). more modern, and fixes event bubbling issues
  $('#lightbox').fadeOut(300);
});


// navigation prev/next
$('body').on('click', '.slide-nav', function(e) {

  // prevent default click event, and prevent event bubbling to prevent lightbox from closing
  e.preventDefault();
  e.stopPropagation();

  var $this = $(this);
  var dest;

  // looking for .prev
  if ($this.hasClass('prev')) {
    dest = current - 1;
    if (dest < 0) {
      dest = size - 1;
    }
  } else {
    // in absence of .prev, assume .next
    dest = current + 1;
    if (dest > size - 1) {
      dest = 0;
    }
  }

  // fadeOut curent slide, FadeIn next/prev slide
  $('#slider img:eq(' + current + ')').fadeOut(100);
  $('#slider img:eq(' + dest + ')').fadeIn(100);

  $('#imgtext p:eq(' + current + ')').fadeOut(100);
  $('#imgtext p:eq(' + dest + ')').fadeIn(100);

  // update current slide
  current = dest;
});


});

优化Jquery库加载图像

0 个答案: