Question

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"
    },
];

function showcustomerscontent(contentId) {
    var oldsrc = customers[jsonOldContentId - 1].image_path[0];
    var imagehtmlold = '<img src=' + oldsrc + ' id="image_opacity" class="img-responsive">';
    var idold = "imageId_" + [jsonOldContentId];

    document.getElementById(idold).innerHTML = imagehtmlold;

    var src = customers[contentId - 1].image_path[0];
    var newsrc = customers[contentId - 1].image_path[1];
    var src = newsrc;
    var imagehtml = '<img src=' + src + ' id="image_opacity" class="img-responsive">';
    var id = "imageId_" + [contentId];

    document.getElementById(id).innerHTML = imagehtml;

}

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

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

Answer 1

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

<强> HTML

<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>

<强> CSS

/* 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%;
}

最后，您只需在点击链接/图标时切换CSS类。查看工具演示的小提琴。

用json加载非常慢的ipad，平板电脑和手机图片？

1 个答案: