Chrome刷新页面时未重载Nanogallery2 JavaScript问题求助

我碰到过不少开发者遇到类似的情况——Safari里刷新页面一切正常，但Chrome里Nanogallery2就“罢工”不重载了。这大概率和Chrome的缓存机制、或者Nanogallery2的自动初始化触发时机有关，给你几个实用的解决方案：

1. 强制绕过Chrome缓存（调试/临时解决） #

Chrome对静态资源的缓存策略比较严格，刷新时可能直接读取本地缓存的旧脚本，导致Nanogallery2没重新初始化。你可以：

• 打开Chrome开发者工具（F12），切换到Network标签，勾选Disable cache（勾选后刷新页面就会强制重新加载所有资源）
• 给脚本和样式文件加版本号参数，强制浏览器重新请求资源，比如：

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js?v=1.0"></script>
  <link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css?v=1.0" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js?v=1.0"></script>
  

2. 显式初始化Nanogallery2（推荐方案） #

依赖Nanogallery2的自动初始化（通过data-nanogallery2属性）在Chrome刷新时可能因为DOM加载顺序问题没触发，改成显式调用初始化函数更可靠：

修改你的代码，把data-nanogallery2属性从div上移除，换成JS代码手动初始化：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>

<h1>Gallery made with nanogallery2</h1>
<div id="myGallery">
  <a href="berlin1.jpg" data-ngthumb="berlin1t.jpg" data-ngdesc="">Berlin 1</a>
  <a href="berlin2.jpg" data-ngthumb="berlin2t.jpg" data-ngdesc="">Berlin 2</a>
  <a href="berlin3.jpg" data-ngthumb="berlin3t.jpg" data-ngdesc="">Berlin 3</a>
</div>

<script>
// 确保DOM完全加载后再初始化
$(document).ready(function() {
  // 先清理可能存在的旧实例，再初始化
  $('#myGallery').nanogallery2('destroy');
  $('#myGallery').nanogallery2({
    "itemsBaseURL": "http://nanogallery2.nanostudio.org/samples/",
    "thumbnailWidth": "200",
    "thumbnailAlignment": "center"
  });
});
</script>

3. 监听页面刷新事件（极端情况） #

如果上面的方法还不行，可以监听Chrome的页面刷新事件，在页面即将刷新时清理Nanogallery2实例，再重新初始化：

window.addEventListener('beforeunload', function() {
  $('#myGallery').nanogallery2('destroy');
});

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', function() {
  $('#myGallery').nanogallery2({
    "itemsBaseURL": "http://nanogallery2.nanostudio.org/samples/",
    "thumbnailWidth": "200",
    "thumbnailAlignment": "center"
  });
});

优先试试显式初始化的方案，这是最稳定的解决办法，能避免大部分浏览器缓存和初始化时机的问题。

内容的提问来源于stack exchange，提问作者Aditya Sodhani