我們可以使用javascript將圖像推送到瀏覽器緩存

我們在我們的應用程序中打印圖像的瀏覽器中具有打印功能。當我們觸發'Windows.Print（）'時，在打印預覽（chrome）中只有第一個圖像總是可用的，而在第一個圖像中，剩餘的圖像顯示爲空白。我們可以使用javascript將圖像推送到瀏覽器緩存

如果我第二次觸發打印事件，所有圖像打印都沒有任何問題，因爲所有圖像都被緩存到那個時間。

請讓我知道如何在打印前將所有圖像推入緩存。我需要在JavaScript中做到這一點。不想做任何html更改。

我正在使用backbone.js並使用圖像創建模型視圖。然後在HTML中綁定視圖。然後我可以使用打印。這在IE和Safari中運行良好。但不是在Chrome中，它顯示打印預覽屏幕並始終嘗試從瀏覽器緩存中加載所有圖像。但在打印時，我不會在瀏覽器中顯示這些圖像。我的所有圖片源都是動態的，來自服務。我只是動態設置網址到圖像源。

<%_.each(Documents, function(oDocument) {%> 
    <div class="images span1">   
     <img src="<%- oDocument.URL%>" width="98" height="70" />  
    </div> 
<% });%>

在打印預覽

只有一個圖片即將其餘全部來爲點。如果我取消打印並再次打印，所有都會很好。

感謝，傑維薩

來源

2014-08-29 user3527063

，如果你提供相應的源代碼，這可能是有用的。 – ben 2014-08-29 21:31:02

請求資源（即放置在''中以使其無法看到）將獲取資源，並在瀏覽器感覺喜歡時緩存資源。然後可以監視IMG'onload'事件以確保資源已被提取，並可能被緩存。 – user2864740 2014-08-29 21:34:20

你還需要幫助Jeevitha還是已經解決了你的問題？ – pwdst 2014-08-30 12:25:53

這可以完全在JavaScript中使用Image object完成。

var cachedImage = new Image(); 
cachedImage.addEventListener('load', function() { 
    alert('Cached image loaded');    
}); 
cachedImage.src = 'http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png';

我在http://jsfiddle.net/pwdst/wc1zrL0v/

新圖像可以響應於用戶事件來創建創建一個工作JSFIDDLE example表示本，例如點擊按鈕，或甚至滾動過去的某位置。如果來自服務器的圖像具有正確的緩存標頭，則它將保留在瀏覽器緩存中，以供以後在打印頁面中使用。

您將能夠在Chrome開發工具的「網絡」選項卡中看到請求，或者通過使用出色的Fiddler tool from Telerik來查看請求。成功加載也會觸發代碼示例中添加的加載事件偵聽器。

來源

2014-08-29 23:34:14 pwdst

謝謝。我試圖在我創建視圖模型的函數中實現以下內容。 var cachedImage = new Image（）; cachedImage.addEventListener（'load'，function（）{ }）; cachedImage.src ='http：// localhost：60883/Information/Document/1411432'; VAR PrintModal =新Backbone.Model（{ 數量：app.activeJob.get（ '編號'）， ID：app.activeJob.get（ 'ID'）， HeaderLabel：titleString， }）; PrintModal.set（'Documents'，arrDocuments）; – user3527063 2014-09-12 15:09:34

但仍然無法正常工作。我不能使用windows onload，因爲我試圖加載的所有圖像都是動態的並且來自服務。 – user3527063 2014-09-12 15:12:23

這部分爲我工作。我需要等待加載所有要加載到緩存中的圖像。目前，即使在下載圖像之前下一行也會執行 – user3527063 2014-09-12 16:15:47

我已經調用了我想要緩存的圖像數組的自定義函數。使用Jquery'Deffered'來保存下一個操作，直到所有圖像加載完畢。這是工作非常精細

var $deferredimages = $.Deferred(); 
var items = []; // load all the images paths 

      PreloadImages(items, loadImageitem, function(){     
       $deferredimages.resolve(); 
      }) 


function PreloadImages(items, preloadimages, allDone) { 

    var count = items.length; 

    // this callback counts down the things to do. 
    var pendingimages = function (items, i) { 
     count--; 
     if (0 == count) { 
      allDone(items); 
     } 
    }; 

    for (var i = 0; i < items.length; i++) { 
     // 'do' each thing, and await callback. 
     preloadimages(items, i, pendingimages); 
    } 
} 

function loadImageitem(items, i, onComplete) { 
    var onLoad = function (e) { 
     e.target.removeEventListener("load", onLoad); 

     // this next line can be removed. 
     // only here to prove the image was loaded. 
     document.body.appendChild(e.target); 

     // notify that we're done. 
     onComplete(items, i); 
    } 
    var img = new Image(); 
    img.addEventListener("load", onLoad, false); 
    img.src = items[i]; 
    img.style.visibility = 'hidden'; 
}

參考http://jsfiddle.net/8baGb/1/

來源

2014-09-12 19:18:36 user3527063

我們可以使用javascript將圖像推送到瀏覽器緩存

回答

相關問題