Javascript 对于使用json的ipad、平板电脑和手机，图像加载速度非常慢？ 函数showCustomerContent（contentId）{ var oldsrc=customers[jsonOldContentId-1]。映像路径[0]； var imagehtmlld=''； var idold=“imageId_216;”+[jsonOldContentId]； document.getElementById（idold.innerHTML=ImageHtmlLD； var src=customers[contentId-1]。映像路径[0]； var newsrc=customers[contentId-1].image_路径[1]； var src=newsrc； var imagehtml=''； var id=“imageId_”+[contentId]； document.getElementById（id）.innerHTML=imagehtml； }

这里的问题是在我的页面顶部有3个小圆形图标，当用户单击图标时，内容必须根据用户单击的图标加载。此外，单击的图标必须更改为其他图标

---

在我的代码中，我使用JSON加载图像，正如您在我的代码中看到的那样。因此，当我点击任何图标时，第二个图标的加载速度非常慢——在手机、iPad和平板电脑上加载要花很多时间。我甚至压缩了图标的大小，但仍然需要时间来加载。有谁能告诉我正确的方向吗？

请评论上面的讨论：图像资源的加载速度取决于许多因素。但最重要的是连接速度和您将使用的硬件/客户端-因此不存在一种简单的加速加载的方法。 避免闪烁的一种方法是直接加载所有图像，这无疑会增加总体加载时间。正如我在上面的评论中所建议的，我会选择基于sprite的解决方案。显示了一个响应迅速的sprite解决方案，该解决方案可能适合：

HTML

var customers = [
    {
        "id": "1",
        "title": "Title1",
        "image_path": [
            "resources/images/cloud.png",
            "resources/images/cloud1.png"
        ],
        "content_path": "resources/json_html/customers/loud.html"
    },
    {
        "id": "2",
        "title": "Title2",
        "image_path": [
            "resources/images/onpremise.png",
            "resources/images/onpremise1.png"
        ],
        "content_path": "resources/json_html/customers/onremise.html"
    },
    {
        "id": "3",
        "title": "Title3",
        "image_path": [
            "resources/images/privatecloud.png",
            "resources/images/privatecloud1.png"
        ],
        "content_path": "resources/json_html/customers/private.html"
    },
];

---

最后，您只需在单击链接/图标时切换CSS类。查看fiddle的工作演示。

到底什么是慢的，是加载JSON异步还是直接加载？或者是图像本身需要时间-你有url查看吗？@axel.michel是的图像本身需要时间加载…这不是一个明确的问题，因为可能有很多原因导致加载缓慢，请提供一个提琴。最佳猜测-制作一个包含所有图标的精灵图像并单击状态，单击“仅修改位置”。如果这是不可能的（因为响应图像），请直接写入所有图像，通过CSS隐藏状态，并在单击。@axel.michel时进行修改。这是一种常用的好方法，但我认为他的问题不同。在上面的小提琴中，只需更改单击的图标，其余的图标必须是默认图标（默认图像）…但正如我们在小提琴中看到的，无论单击哪个图像，它都在更改，并且所有图像至少都已更改。@User2413这是如何使用响应精灵的演示，而不是您代码的完整副本。您需要一种优化图像加载的方法，创建小提琴就是为了证明这一点。但是我更新了小提琴来满足你的要求（如果我没弄错的话）

<ul class="tabs">
    <li class="tab">
        <a href="#url1" id="t1">
            <img class="spacer" src="{placeholder required  to handle responsiveness}" />
            <img src="{the sprite itself}" />
        </a>
    </li>
    [...]
</ul>

/* wraps spacer and sprite image */
.tab a {
    display: block;
    position: relative;
    overflow: hidden;
    max-width: 160px; /* your max icon size */
    width: 100%;    

}

.tab a img {
    border: 0;
    padding: 0;
    margin: 0;
    display: block;
}

.tab .spacer {
     width: 100%;
     height: auto;
}

.tab a img + img {
    position: absolute; 
    top: 0;
    left: 0;
    max-width: none;
    max-height: 100%;
}


/* positioning of the sprite elements */
#Id img {
    left: -400%;
}