Javascript 当必须首先在服务器上生成映像时，将映像异步预加载到浏览器缓存中

已经阅读stackoverflow几年了，但从未发布过。直到今天，我遇到了一个我自己无法解决的问题，也没有找到解决问题的方法

场景：我有一个动态网页，基本上显示网站的截图。这些屏幕截图是为每个新用户动态生成的，他们的URL也会发生变化。我想将这些图像预加载到浏览器缓存中，以便在用户单击链接后，它们在0毫秒内可用。我不想增加页面的主观加载时间，所以它们必须在后台无形地加载

我的做法： 我使用jelastic作为我的基础设施，以便以后能够进行扩展，然后使用nginx、PHP和PhantomJS安装centOS。我使用PHP查询phantomJS以制作屏幕截图：

exec（“phantomjs engine.js”。$source.“$filez.”>/dev/null&”

dev/null用于不增加用户的加载时间。 我将链接输出到浏览器。到目前为止，它是有效的。现在我想预加载这些图像：

for (var i = 0; i < document.links.length; i++) {   
    imgArray[i] = new Image(1,1);
    imgArray[i].visibility = 'hidden';
    imgArray[i].src = (document.links[i].href.substr(7) + ".png");              
    document.links[i].href = 'javascript: showtouser("' + imgArray[i].src.substr(7) + '");';
}

for（var i=0；i

有两件事我肯定做错了：

• 在服务器上生成图像之前，我启动图像预加载。我还没有找到一种方法，只有在phantomJS生成图像后才能启动缓存。Onload事件显然在这里不起作用
• 我认为我的方法不是真正的异步，它会增加用户感觉到的主观加载时间

---

我做错了什么？我是一个ISP的家伙，我对javascript一窍不通：/

你的方法是异步的。您需要的是一种机制来识别未加载的映像，然后重试

此脚本将预加载图像，如果失败，则重试，并隐藏即使重试后也不存在的图像链接（）：

var links = Array.prototype.slice.call(document.links, 0); // Converting links to a normal array

links.forEach(prepareImageLink);

function prepareImageLink(link) {
    var retries = 3; // current image number of retries
    var image = new Image();

    /** option: hide all links then reveal those with preloaded image
    link.style.visibility = 'hidden'; 

    image.onload = function() {
        link.style.visibility = '';
    };
    **/

    image.onerror = function() {
        if(retries === 0) {
            link.style.visibility = 'hidden'; // hide the link if image doesn't exist
           //link.remove(); // option - remove the link if image doesn't exist
            return;
        }

        retries--;

        setTimeout(function() {
            image.src = image.src + '?' + Date.now(); // for image to reload by adding the current dateTime to url
        }, 1000); // the amount of time to wait before retry, change it to fit you're system

    };

    image.src = (link.href + ".png"); // add .substr(7) in your case

    /** This is instead of 'javascript: showtouser("' + imgArray[i].src.substr(7) + '");'; which won't work on some browsers **/

    link.addEventListener('mouseover', function() {
        document.getElementById('image').src = image.src; // change to your showtouser func
    });
}