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

Question

У меня есть приложение MVC asp.net, где я показываю несколько изображений в представлении, количество этих изображений варьируется от 100 до 2500 на группу. В представлении я предварительно загружаю изображения для каждой группы, затем я выбираю другую группу из выпадающего списка, это обновит страницу. Первая предварительная загрузка отлично работает, однако, когда я меняю группу, она очень медленная. Ссылка на эти изображения в базе данных MS SQL, список изображений для определенного gorup поступает через контроллер (C#). Вот Javascript Я использую:

 var impath = $("#ImagePath").val(); 
     var im = $("#ImageName").val(); 

     var images = null; 
     var images = []; 
     var tochar = $("#lastchar").val(); 


     function preload_images() { 

      var i; 
      for (i = tochar; i < sl; i++) { 
       images[i] = new Image(); 
       var name = impath.toString() + im.toString() + i; 

      } 
     } 

Мой вопрос есть способ ускорить процесс предварительной загрузки, и мне нужно, чтобы удалить предустановленные изображения из памяти перед загрузкой следующей группы, и как я могу удалите их, я использовал images = null, это правильный путь. Заранее спасибо.

Answer 1

Лучший способ справиться с тем, что многие изображения будут использовать спрайты. С спрайтами вы загружаете одно более крупное изображение, содержащее много и много меньших изображений. Поскольку загрузка одного изображения много, быстрее в браузере, чем загрузка большого количества небольших изображений, ваша предварительная загрузка может быть намного быстрее. Фактически, вы могли буквально просто предварительно загрузить одно изображение, содержащее целый блок ваших суб-изображений.

Затем, когда вы хотите отобразить одно из этих изображений, вы показываете только обрезанную часть изображения. Существует несколько способов сделать это отображение, но общий способ - создать объект требуемого размера ячейки и отобразить большее изображение в качестве фона с соответствующим смещением, чтобы выстроить его в нужную часть большего изображения.

Вот полезная ссылка на CSS и спрайтов: http://css-tricks.com/css-sprites/

Вы должны создать соответствующие спрайты на стороне сервера, чтобы использовать эту технику.

---

В ответ на некоторые из ваших других вопросов.

Нет, вы не можете ускорить их, кроме загрузки меньшего количества изображений (как указано выше) или уменьшения размера каждого изображения. Браузер будет выполнять только N запросов изображения за раз (вероятно, чтобы не перегружать серверы) по сети, поэтому остальные будут стоять в очереди до тех пор, пока один не закончится, а затем следующий запрос будет сделан и т. Д.

Вы можете освободите изображения из памяти, просто убедившись, что вы больше не держите ссылку на них. Таким образом, сборщик мусора браузера очистит созданные вами объекты Image(). В настройках вашего кода images = null или images = [] будет выполняться так, что если объекты Image() не привязаны нигде. Изображения будут по-прежнему оставаться в кеше браузера и по-прежнему будут предварительно загружены (их не нужно будет загружать по сети, если ссылаются снова).