问题描述
我在下面的页面上嵌入了一个带有 fotorama 的 jQuery 图片库。当它第一次在新浏览器上加载时，图像将加载 96x64 像素（可能不是硬性规则，但只是对尺寸进行了一次测量）。如果相同的浏览器重新加载页面，则图像将正确加载并达到所需的大小。下面有缩略图，这些都可以正常加载（64x64px 方块）
它正在构建的页面是一个 Clickfunnels 页面。问题出现在桌面和移动设备上，也出现在所有浏览器上（经过测试的 Chrome、Edge 和 Safari）。这是网站链接： https://www.sehjra.com/test-me
我需要第一次将主图像加载到所需的大小，因为客户不会知道刷新页面并认为它已损坏。
我在页脚中嵌入了以下内容：
<!-- fotorama from CDnjs,19 KB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css"
rel="stylesheet">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js">
</script>
我已将以下内容嵌入到要呈现图像的正文中：
<!-- Add images to <div class="fotorama"></div> -->
<div class="fotorama"
data-nav="thumbs"
data-loop="true">
<a href="https://images.clickfunnels.com/75/5f7faccfac43bb82f07bc207f4ecdb/_12A0017.jpg"><img
src="https://images.clickfunnels.com/c9/175041297a4c9a88aad08820614ef6/_12A0017.jpg"></a>
<a href="https://images.clickfunnels.com/aa/b8cfd269914ebf93037a9f8776f5f6/_12A0064.jpg"><img
src="https://images.clickfunnels.com/f3/adf5f4d8f34f9cb2166e0d9e5f71f0/_12A0064.jpg"></a>
<a href="https://images.clickfunnels.com/ba/efaf8f7f204a9587113f70ced4030e/_12A0062.jpg"><img
src="https://images.clickfunnels.com/a4/848dfbfe4a4dc8bda505ec1300b5cd/_12A0062.jpg"></a>
<a href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a>
<a href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a> <a
href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a>
</div
解决方法
@shimmyshimmywah，我尝试了您的代码，发现只需添加 data-fit（覆盖或包含）即可。请检查下面的示例。
https://jsbin.com/bovukav/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<!-- jQuery 1.8 or later,33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Fotorama from CDNJS,19 KB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
</head>
<body>
<h1>Hi,Johnson321</h1>
<!-- Add images to <div class="fotorama"></div> -->
<div class="fotorama"
data-nav="thumbs"
data-loop="true" data-fit="cover">
<a href="https://images.clickfunnels.com/75/5f7faccfac43bb82f07bc207f4ecdb/_12A0017.jpg"><img
src="https://images.clickfunnels.com/c9/175041297a4c9a88aad08820614ef6/_12A0017.jpg"></a>
<a href="https://images.clickfunnels.com/aa/b8cfd269914ebf93037a9f8776f5f6/_12A0064.jpg"><img
src="https://images.clickfunnels.com/f3/adf5f4d8f34f9cb2166e0d9e5f71f0/_12A0064.jpg"></a>
<a href="https://images.clickfunnels.com/ba/efaf8f7f204a9587113f70ced4030e/_12A0062.jpg"><img
src="https://images.clickfunnels.com/a4/848dfbfe4a4dc8bda505ec1300b5cd/_12A0062.jpg"></a>
<a href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a>
<a href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a> <a
href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a>
</div>
</body>
</html>我有解决方案，您需要从链接中删除异步。 async 在这里引起了一些麻烦。脚本期望当前未加载的内容，因此当您再次刷新页面时，浏览器的缓存返回缓存文件，一切正常。如果它没有通过删除 async 关键字得到纠正，我将需要源代码来准确评估。我在 Upwork 找到了你（我没有申请项目）。 “约翰逊321”