带有 json 的 ipad、平板电脑和手机的图像加载速度非常慢？

Posted 2023-03-12

【中文标题】带有 json 的 ipad、平板电脑和手机的图像加载速度非常慢？

【英文标题】：images loading very slowly for ipad,tablets and mobiles with json?

【发布时间】：2014-11-28 10:51:07

【问题描述】：

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、平板电脑上加载需要很长时间。我什至压缩了图标的大小，但加载仍然需要时间。那么任何人都可以告诉我正确的方向吗？

【问题讨论】：

到底慢是什么，你是异步加载JSON，还是直接加载？或者是图像本身需要时间 - 你有网址可以看吗？

@axel.michel 是的，图像本身需要时间来加载......

这不是一个明确的问题，因为加载缓慢可能有很多原因，请提供一个小提琴。

最佳猜测 - 制作一个包含所有图标和点击状态的精灵图像，onclick 只是修改位置。如果这是不可能的（因为响应图像）直接写入所有图像，通过 CSS 隐藏状态并在点击时修改它。

@axel.michel 这是一种常用的好方法，但我认为他的问题不同。

【参考方案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 类。请参阅小提琴以获取工作演示。

【讨论】：

在上面的小提琴中，只有点击的图标必须改变，剩下的必须是默认的（默认图像）..但正如我们在小提琴中看到的那样，无论我们点击哪个图像它都在改变最后所有的图像都已更改..

@User2413 这是一个演示如何使用响应式精灵而不是完整的代码副本。您要求一种优化图像加载的方法，创建小提琴是为了证明这一点。但我更新了小提琴以满足您的要求（如果我做对了）jsfiddle.net/x4g86wdz/1