Javascript 加载时，图片在移动浏览器中消失

我在jacobstarr.github.io上有一个网站，在那里我在jacobstarr.github.io/work上发布了我的一些作品的公文包。正如您所见，我有两张幻灯片：一张是发布单个项目的一些屏幕截图，另一张是发布其他项目的预览缩略图。单击缩略图图像时，DOM将清空，并填充与之关联的特定项目的相关信息。我遇到的问题是，当有人单击下幻灯片中的Thumnail图像时，上幻灯片中项目的屏幕截图不会出现，这显然只发生在移动设备浏览器上。所有其他内容都会出现，但屏幕截图不会出现

从我拍摄的照片可以看出这一点：第一张是当浏览器缩小到合适的屏幕大小时，我从Chrome上拍摄的屏幕截图。当用户单击下幻灯片中的缩略图时，项目屏幕截图显示良好。第二个是我从iOS模拟器上截取的屏幕截图，模拟了完全相同的行为

我在代码中做的是什么？如果有什么帮助的话，我正在使用slick slider插件。如果有人能在这里帮助我，我将不胜感激。我也在下面的JS中发布了必要的函数

Chrome（浏览器宽度<400px）

iOS模拟器-iPhone视网膜4英寸（纵向）

app.js

    /* Set Slick slider settings
=============================== */
slickSliderConfig = function() {

var projectGalleryArrowPrev = '<a><img class="project-gallery__arrow--prev" src="../img/work/arrow-left-btn.svg"></a>'
var projectGalleryArrowNext = '<a><img class="project-gallery__arrow--next" src="../img/work/arrow-right-btn.svg"></a>'

$('.project-gallery').slick({
    speed: 300,
    slide: 'figure',
    fade: true,
    speed: 600,
    cssEase: 'linear',
    prevArrow: projectGalleryArrowPrev,
    nextArrow: projectGalleryArrowNext
});

$('.more-projects-gallery').slick({
    speed: 300,
    slide: '.more-projects-gallery__thumbnail',
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    prevArrow: projectGalleryArrowPrev,
    nextArrow: projectGalleryArrowNext,
    responsive: [
        {
            breakpoint: 800,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true
            }
        },
        {
            breakpoint: 680,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2,
                infinite: true
            }
        },
        {
            breakpoint: 410,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite: true
            }
        }
    ]
});
}

/* Initialize slider
=============================== */
$(function(){
    slickSliderConfig();
});
/* Load project content
=============================== */

loadProjectContent = function() {
var $projectContainer = $('.project-container');
var $moreProjectsGalleryImageContainer = $('.more-projects-gallery__thumbnail');
var $moreProjectsGalleryImage = $('.more-projects-gallery__thumbnail img');

// Select specific projects in project-container
var $projectGregMauz = $('#project-gregmauz');
var $projectPersonal = $('#project-personal');
var $projectSyllabus = $('#project-syllabus');
var $projectLemur = $('#project-lemur');

// Select project thumbnails in more-projects-gallery
var $thumbnailGregMauz = $('.more-projects-gallery__thumbnail--gregmauz');
var $thumbnailPersonal = $('.more-projects-gallery__thumbnail--personal');
var $thumbnailSyllabus = $('.more-projects-gallery__thumbnail--syllabus');
var $thumbnailLemur = $('.more-projects-gallery__thumbnail--lemur');

// Hide the non-default specific projects from DOM
$projectPersonal.hide();
$projectSyllabus.hide();
$projectLemur.hide();

// Function for animating scroll
animateScroll = function(element) {
    $('html, body').animate({
        scrollTop: $(element).offset().top
    });
}

// When user clicks Greg Mauz thumbnail image
$thumbnailGregMauz.on("click", function(){
    $projectContainer.children().hide();
    $projectGregMauz.fadeIn(1100).show();
    $('.project-gallery').unslick();
    slickSliderConfig();
    flowTypeConfig();
    animateScroll('#project-gregmauz');
});

// When user clicks Personal thumbnail image
$thumbnailPersonal.on("click", function(){
    $projectContainer.children().hide();
    $projectPersonal.fadeIn(1100).show();
    $('.project-gallery').unslick();
    slickSliderConfig();
    flowTypeConfig();
    animateScroll('#project-personal');
});

// When user clicks Syllabus thumbnail image
$thumbnailSyllabus.on("click", function(){
    $projectContainer.children().hide();
    $projectSyllabus.fadeIn(1100).show();
    $('.project-gallery').unslick();
    slickSliderConfig();
    flowTypeConfig();
    animateScroll('#project-syllabus');
});

// When user clicks Lemur thumbnail image
$thumbnailLemur.on("click", function(){
    $projectContainer.children().hide();
    $projectLemur.fadeIn(1100).show();
    $('.project-gallery').unslick();
    slickSliderConfig();
    flowTypeConfig();
    animateScroll('#project-lemur');
});



}

/* Initialize project content
=============================== */
$(function(){
    loadProjectContent();
});

/*设置滑动条设置
=============================== */
slickSliderConfig=函数（）{
var projectGalleryArrowPrev=''
var projectGalleryArrowNext=''
$（“.project gallery”）.slick({
速度:300,，
幻灯片：“图”，
是的，
速度:600,，
cssEase:'线性'，
prevArrow:ProjectGalleryArrow Prev，
nextArrow:ProjectGallery箭头NEXT
});
$（“.更多项目库”）.slick({
速度:300,，
幻灯片：'.more-projects-gallery\uuuu缩略图'，
无限：是的，
幻灯片放映：4，
幻灯片滚动：4，
prevArrow:ProjectGalleryArrow Prev，
nextArrow:ProjectGallery箭头下一步，
响应：[
{
断点：800，
设置：{
幻灯片放映：3，
幻灯片滚动：3，
无限：真的
}
},
{
断点：680，
设置：{
幻灯片放映：2，
幻灯片滚动：2，
无限：真的
}
},
{
断点：410，
设置：{
幻灯片放映：1，
幻灯片滚动：1，
无限：真的
}
}
]
});
}
/*初始化滑块
=============================== */
$（函数（）{
slickSliderConfig（）；
});
/*加载项目内容
=============================== */
loadProjectContent=函数（）{
var$projectContainer=$（'.projectContainer'）；
var$moreprojectsgallerymagecontainer=$（'.more-projects-gallery__缩略图'）；
var$moreProjectsGalleryImage=$（'.more-projects-gallery\uuuu缩略图img'）；
//在项目容器中选择特定项目
var$projectGregMauz=$（“#projectGregMauz'）；
var$projectPersonal=$（“#projectPersonal”）；
var$projectcellus=$（“#项目教学大纲”）；
var$projectLemur=$（“#projectLemur”）；
//在“更多项目”库中选择项目缩略图
var$thumbnailGregMauz=$（'.more-projects-gallery_uu-thumbnailGregMauz--gregmauz'）；
var$thumbnailPersonal=$（'.more-projects-gallery\uuuu-thumbnailPersonal--personal'）；
var$thumbnailceallus=$（'.more-projects-gallery\uuuu-thumbnailceallus--ceallus'）；
var$thumbnailLemur=$（'.more-projects-gallery\uuuu-thumbnailLemur--lemur'）；
//从DOM中隐藏非默认特定项目
$projectPersonal.hide（）；
$ProjectCelletus.hide（）；
$projectLemur.hide（）；
//用于设置滚动动画的函数
animateScroll=函数（元素）{
$（'html，body'）。设置动画({
scrollTop:$（元素）.offset（）.top
});
}
//当用户单击Greg Mauz缩略图时
$thumbnailGregMauz.on（“单击”，函数（）{
$projectContainer.children（）.hide（）；
$projectGregMauz.fadeIn（1100.show（）；
$（'.project gallery'）.unslick（）；
slickSliderConfig（）；
flowTypeConfig（）；
animateScroll（“#gregmauz项目”）；
});
//当用户单击个人缩略图图像时
$thumbnailPersonal.on（“单击”，函数（））{
$projectContainer.children（）.hide（）；
$projectPersonal.fadeIn（1100.show（）；
$（'.project gallery'）.unslick（）；
slickSliderConfig（）；
flowTypeConfig（）；
animateScroll（“#个人项目”）；
});
//当用户单击教学大纲缩略图时
$ThumbnailCelletus.on（“单击”，函数（））{
$projectContainer.children（）.hide（）；
$ProjectCelletus.fadeIn（1100.show（）；
$（'.project gallery'）.unslick（）；
slickSliderConfig（）；
flowTypeConfig（）；
animateScroll（“#项目教学大纲”）；
});
//当用户单击狐猴缩略图时
$thumbnailLemur.on（“单击”，函数（））{
$projectContainer.children（）.hide（）；
$projectLemur.fadeIn（1100.show（）；
$（'.project gallery'）.unslick（）；
slickSliderConfig（）；
flowTypeConfig（）；
动画片（“狐猴计划”）；
});
}
/*初始化项目内容
=============================== */
$（函数（）{
loadProjectContent（）；
});

pics有时会很挑剔，如果我遗漏了什么。。。在所有代码中，我看到了对动态放置的箭头图像的引用。我想主图像也是。。。但我在代码中没有看到任何引用。我想检查图像类型；有些可能会引起问题。特别是，SVG可能会变得非常奇怪，但我看到您正在将它们用于箭头。SVG中的某些选项是否可能导致此问题？你能切换到更可靠（虽然更大）的东西，比如PNG和test吗？