Как поставить в очередь предварительно загруженные изображения для браузера, чтобы их кэшировать и использовать на других страницах

Я сохраняю это как фрагмент. C # 6 добавляет хороший синтаксис для вызова обработчика.

// INotifyPropertyChanged

public event PropertyChangedEventHandler PropertyChanged;

private void Set<T>(ref T property, T value, [CallerMemberName] string propertyName = null)
{
    if (EqualityComparer<T>.Default.Equals(property, value) == false)
    {
        property = value;
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
0
задан MonsterMMORPG 7 March 2019 в 12:41
поделиться

1 ответ

Что-то вроде этого?

У меня нет времени, чтобы сделать это красиво.

const pref = "https://static.pokemonpets.com/images/attack_animations/";
const defa = "https://imgplaceholder.com/20x20/000/fff/fa-image";
const images=['absorb1','bleeding1','bug_attack1','bug_attack2','bug_boost1','burned1','change_weather_cloud','confused1','copy_all_enemy_moves','copy_last_move_enemy','cringed1','critical1','cure_all_status_problems','dark_attack1','dark_attack2','dark_attack3','dark_boost1','double_effect','dragon_attack1','dragon_attack2','dragon_attack3','dragon_attack4'];
let cnt = 0;
function loadIt() {
  if (cnt >= images.length) return;
  $("#imagecontainer > img").eq(cnt).attr("src",pref+images[cnt]+".png"); // preload next
  cnt++;
}
const $cont  = $("#container");
const $icont = $("#imagecontainer");

// setting up test images
$.each(images,function(_,im) {
  $cont.append('<img src="'+defa+'" id="'+im+'"/>'); // actual images
  $icont.append('<img src="'+defa+'" data-id="'+im+'"/>'); // preload images
});

$("#imagecontainer > img").on("load",function() {
  if (this.src.indexOf("imgplaceholder") ==-1)  { // not for the default image
    $("#"+$(this).attr("data-id")).attr("src",this.src); // copy preloaded
    loadIt(); // run for next entry
  }  
})

loadIt(); // run
#imagecontainer img { height:20px }
#container img { height:100px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
<hr/>
<div id="imagecontainer"></div>

0
ответ дан mplungjan 7 March 2019 в 12:41
поделиться
Другие вопросы по тегам:

Похожие вопросы: