Yeni URL istifadə edərək, görünüşü yeniləyin

Sitemdeki bağlantıya giriş yapıyorum, bu da her bir erişimle yeni bir görüntü təmin edəcək.

Karşılaştığım problem, arka planda bir resim yüklemek ve sayfada yenilemek isterseniz, resim değişmeyecektir - sayfamı yeniden yüklerken güncelleştirilse de.

 var newImage = new Image(); newImage.src = "http://localhost/image.jpg"; function updateImage() { if(newImage.complete) { document.getElementById("theText").src = newImage.src; newImage = new Image(); number++; newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date(); } setTimeout(updateImage, 1000); } 

FireFox'un gördükləri başlıqlar:

 HTTP/1.x 200 OK Cache-Control: no-cache, must-revalidate Pragma: no-cache Transfer-Encoding: chunked Content-Type: image/jpeg Expires: Fri, 30 Oct 1998 14:19:41 GMT Server: Microsoft-HTTPAPI/1.0 Date: Thu, 02 Jul 2009 23:06:04 GMT 

Yalnız bu səhifəni yeniləmək lazımdır. Hər hansı bir fikir?

259
03 июля '09 в 1:44 2009-07-03 01:44 QueueHammer iyul ayının 03-də '09 'da 1:44' də quraşdırılmışdır 2009-07-03 01:44
@ 16 cavab

Mən başa düşdüm ki, yeniləməyə çalışdığım mənbə bu kataloqdakı bir şəkil üçün hər hansı bir istək ilə server təmin etməkdir. Daha sonra bir zamanlayıcı oldum, adın sonuna bir ədəd əlavə edərək, DOM yeni bir şəkil kimi görür və yüklədi.

məsələn.

 http://localhost/image.jpg //and http://localhost/image01.jpg 

eyni görünüş nəsil kodunu tələb edəcək, lakin brauzerdə müxtəlif şəkillər kimi görünəcək.

 var newImage = new Image(); newImage.src = "http://localhost/image.jpg"; var count = 0; function updateImage() { if(newImage.complete) { document.getElementById("theText").src = newImage.src; newImage = new Image(); newImage.src = "http://localhost/image/id/image" + count++ + ".jpg"; } setTimeout(updateImage, 1000); } 
2
17 авг. Cavab QueueHammer 17 aug. 2009-08-17 18:18 '09 at 18:18 'da 2009-08-17 18:18

URL'nin sonunda bir önbellek ünvanı əlavə edin:

 newImage.src = "http://localhost/image.jpg?" + new Date().getTime(); 
border=0

Bir görüntü yaratdığınız zaman, cari vaxt damgası avtomatik olaraq əlavə edilir və brauzerin onu önbelleğe almasını əvəzinə görüntünün yenidən görünməsinə səbəb olur.

286
03 июля '09 в 1:46 2009-07-03 01:46 Cavab Paolo Bergantino tərəfindən 03 iyul '09 tarixində 1:46 'də verilmişdir 2009-07-03 01:46

Bunun necə bir cür cavab verdiyini gördük, buna görə də mən onları burada ümumiləşdirəcəyimi düşünürdüm (üstəgəl öz ixtiramın dördüncü metodunu əlavə edin):


(1) URL'ye unikal bir önbellek istekası parametresini əlavə edin, məsələn:

 newImage.src = "image.jpg?t=" + new Date().getTime(); 

Pros: 100% etibarlı, sürətli və aydın və tətbiq edilə bilən.

Eksiklikler: Görünüş arasında dəyişməz olduqda, lazımsız gecikmələr və bant genişliyi istifadə deməkdir tamamilə bypassing tarar. Potensial olaraq brauzerinizin önbelleğini (və hər hansı bir aralıq önbelleği) eyni şəkillərin bir nüsxəsi ilə doldurur! Ayrıca görüntünün URL'sini dəyişdirməlisiniz.

Istifadə edərkən : Şəkil daim dəyişkən zaman, məsələn canlı veb kameranı qidalandırmaq üçün istifadə edin. Bu metodu istifadə etsəniz, özünüzü Cache-control: no-cache istifadə edərək, şəkilləri göstərdiyinizə əmin olun Cache-control: no-cache HTTP başlıqları! (Tez-tez bu .htaccess faylını istifadə edərək konfiqurasiya edilə bilər). Əks təqdirdə, şəkilin köhnə versiyaları ilə tədricən önə çəkəcəksiniz!


(2) Yalnızca fayl çalışırken dəyişən bir URL üçün bir istek parametresi əlavə edin, məsələn:

 echo '<img src="image.jpg?m=' . filemtime('image.jpg') . '">'; 

(Bu PHP server kodudur, amma burada mühüm məsələ m = [sonuncu dəfə redaktə edilmiş fayl] ilə faylın adı ilə faylın adına əlavə olunur.

Pros: 100% etibarlı, sürətli və asan anlamaq və həyata keçirmək, həmçinin mükəmməl önbelleğe alma faydalarını saxlayır.

Eksiklik: Görünüşün URL'sini dəyişdirmək lazımdır. Bundan əlavə, server bir az daha çox iş tələb edir - sonuncu faylın dəyişmə vaxtı ilə əlaqəli olmalıdır. Bundan əlavə, server məlumatı tələb olunur, buna görə yenilənmiş görünüşü yoxlamaq üçün tamamilə müştərilərlə bağlı bir həll üçün uyğun deyil.

Istifadə etmək üçün: Şəkilləri önbelleklemek istəyirsinizsə, ancaq fayl adını dəyişdirmədən serverdə zaman-zaman yeniləməlisiniz. İstədiyiniz düzgün ardıcıllığı HTML-də hər bir nümunəyə asanlıqla əmin edə bilərsiniz.


(3) Başlıqla şəkillər göndərin Cache-control: max-age=0, must-revalidate və URL-də cache parçasının unikal nadir identifikatorunu əlavə edin, məsələn:

 newImage.src = "image.jpg#" + new Date().getTime(); 

Buradakı ideya, brauzerin önbelleğindeki görünüşləri brauzerin önbelleğine qoyur, ancaq onları hər dəfə təkrar nümayiş etdirmək üçün dərhal köhnəlmiş kimi qeyd edir, brauzer serverlə dəyişdirildiklərini yoxlamaq üçün serverlə əlaqəli olmalıdır. Brauzerin HTTP önbelleği həmişə görüntünün son surətini qaytarır. Bununla belə, brauzerlər tez-tez yaddaşda yaddaşın bir surətini təkrar istifadə edəcəklər və hətta əgər bu halda onların HTTP önbelleğini yoxdursa. Bunun qarşısını almaq üçün bir fraqment identifikatoru istifadə olunur: src yaddaşında bir görüntünün müqayisə bir fragman identifikatorunu ehtiva edir, ancaq HTTP önbellek isteğinden əvvəl silinir. (Məsələn, image.jpg#Aimage.jpg#B HTTP brauzerinin önbelleğindeki image.jpg göstərilə bilər, lakin image.jpg#B son image.jpg#A bəri yaddaşda saxlanan görüntü məlumatları ilə heç vaxt göstərilməyəcək image.jpg#A göstərilir).

Pros: HTTP önbellekleme mexanizmlərini düzgün istifadə edir və dəyişdirilmədikləri halda önbellekli şəkilləri istifadə edir. Statik bir görüntünün URL'sinə əlavə olunmuş sorgu dizgesinde duran sunucularda çalışır (serverler fragman tanımlayıcıları görmemektedir - yalnız tarayıcılar tarafından kullanılmak üzere tasarlanmıştır).

Eksiler: URL-lərimdə fraqment identifikasiyası olan şəkillərlə əlaqədar bir qədər şübhəli (və ya ən azı zəif sənədləşdirilmiş) brauzer davranışı təmin edir (lakin bunu FF27, Chrome33 və IE11-də uğurla sınaqdan keçirdim). Hələ şəkillər nadir hallarda dəyişir və / və ya gecikmə böyük bir problem olduqda həddindən artıq ola bilər hər bir şəkil üçün server yenidən yoxlamaq üçün bir müraciət göndərir (çünki cavab yenidən gözdən keçirilməlidir, hətta cached image hələ də yaxşıdır) , Şəkillərin URLlərini dəyişmək istəyirəm.

Istifadə edərkən: Şəkillər tez-tez dəyişə və ya script server tərəfində iştirak etmədən müştəri tərəfindən dövri olaraq yenilənməlidir, ancaq siz hələ də önbelleğin üstünlüyünə ehtiyac duyduğunuz yerdə istifadə edin. Məsələn, bir neçə dəqiqə ərzində şəkili düzensiz olaraq yeniləyən canlı bir web kamerası anketi. Alternativ olaraq, serveriniz şəkillərin statik URL-lərinə yenidən baxmağa icazə vermirsə (1) və ya (2) yerinə istifadə edin.


(4) Javascript istifadə edərək əvvəlcədən gizli <iframe> üzərinə yükləyərək və iframe contentWindow location.reload(true) zəng edərək xüsusi bir görüntüyü zorla güncəlləşdirin.

Adımlar:

  • Gizli iframe-də güncəllənmək üçün şəkil yükləyin. Bu, yalnız bir quraşdırma addımdır - zəruri hallarda bu əvvəlcədən həyata keçirilə bilər. Görünüşün bu mərhələdə yüklənməməsi əhəmiyyətli deyil!

  • Bundan sonra, bu görüntünün bütün surətlərini səhifənizdə və ya hər hansı bir DOM qovluğunda (hətta javascript dəyişənlərində saxlanan əlavə səhifələr) silin. Brauzer başqa bir görünüşü yaddaşda köhnəlmiş bir surətdən (xüsusilə də IE11) edirsə, bunun zəruri olması lazımdır: HTTP önbelleğinin yenilənməzdən əvvəl yaddaşda olan bütün surətlərin silinməsinə əmin olmalısınız. Başqa bir javascript kodu asinxron olaraq işlədilirsə, bu kodun eyni zamanda yenilənmiş surətin yeni nüsxələrini yaratmadığından əmin ola bilərsiniz.

  • iframe.contentWindow.location.reload(true) . true qüvvələr cache traversal, serverdan birbaşa yüklənir və mövcud önbelleğe yazılmış surəti yazır.

  • Yenidən tamamlandıqdan sonra gizli şəkilləri bərpa edin. İndi onlar serverdən yeni versiyanı göstərməlidirlər!

Eyni ərazidə olan şəkillər üçün doğrudan iframe-ə yüklənə bilərsiniz. Kənar sahədə olan şəkillər üçün, <img> içərisində olan şəkli olan domeninizdən bir HTML səhifə yükləmək lazımdır, əks halda iframe.contentWindow.reload(...) zəng etməyə cəhd etdiyinizdə bir "Access Denied" ("Access Denied") səhv mesajı iframe.contentWindow.reload(...) .

Pros: DOM-a istədiyiniz image.reload () funksiyası ilə eyni şəkildə işləyir! Hər zamanki kimi şəkil çəkməyə imkan verir (gələcəkdə sona çatma tarixləri olsa belə, onları tez-tez yenidən yoxlamadan qaçın). Yalnız bir müştəri kodu istifadə edərək, bu görüntünün URL-lərini dəyişdirmədən xüsusi səhifəni yeniləməyə imkan verir.

Eksiler: Javascript əsasında. Hər brauzerdə 100% işləməyi təmin etmirəm (bunu FF27, Chrome33 və IE11-də uğurla sınaqdan keçirdim). Digər üsullarla bağlı çox çətin.

Zamanı istifadə edərkən : Önbelleğe almaq istədiyiniz əsasən statik görünüşlər toplusu olduqda, ancaq yenə də onları mütəmadi olaraq yeniləmək və dərhal vizual geribildirim əldə etmək lazımdır. (Xüsusilə, bütün brauzer səhifəsinin yenilənməsi yalnız AJAX-da qurulmuş bəzi web applications kimi işləməyəcəkdir). Və (1) - (3) metodları qeyri-mümkün olduqda (nədənsə) potensial olaraq yenilənməli bir görünüş göstərə biləcək bütün URL'leri dəyişdirə bilməzsiniz. (Qeyd edək ki, bu 3 metoddan istifadə edilərkən, şəkil yenilənəcək, lakin başqa bir səhifə müvafiq surət və ya fraqment identifikatoru olmadan bu görüntüyü göstərməyə çalışırsa, bunun əvəzində köhnə bir versiya göstərilə bilər).

Aşağıdakı bunlar təəccüblü və çevik bir şəkildə budur:

/img/1x1blank.gif URL /img/1x1blank.gif yolu boyunca .gif boş bir 1x1 pikseli ehtiva etdiyini və ayrıca aşağıdakı bir satırlı PHP skriptini ehtiva etdiyini (yalnız cross-domain şəkilləri üçün məcburi bir yeniləmə tələb olunur və server tərəfində hər hansı bir scriptinq dilində yenidən yaza bilərsiniz) ) URL yolunda /echoimg.php :

 <img src="<?=htmlspecialchars(@$_GET['src'],ENT_COMPAT|ENT_HTML5,'UTF-8')?>"> 

Bütün bunları Javascript'ta necə edə biləcəyinizin gerçək bir tətbiqidir. Bir az daha mürəkkəb görünür, lakin bir çox şərh var və mühüm funksiya sadəcə forceImgReload () - ilk iki yalnız boş və qeyri-boş şəkillərdir və öz HTML kodunuzla effektiv şəkildə işləmək üçün nəzərdə tutulmalıdır, belə ki, sizin üçün ən yaxşı iş üçün kodlaşdırın; Onların içərisində baş verən ağırlaşmaların əksəriyyəti saytınız üçün lazımsız ola bilər:

 // This function should blank all images that have a matching src, by changing their src property to /img/1x1blank.gif. // ##### You should code the actual contents of this function according to your page design, and what images there are on them!!! ##### // Optionally it may return an array (or other collection or data structure) of those images affected. // This can be used by imgReloadRestore() to restore them later, if that an efficient way of doing it (otherwise, you don't need to return anything). // NOTE that the src argument here is just passed on from forceImgReload(), and MAY be a relative URI; // However, be aware that if you're reading the src property of an <img> DOM object, you'll always get back a fully-qualified URI, // even if the src attribute was a relative one in the original HTML. So watch out if trying to compare the two! // NOTE that if your page design makes it more efficient to obtain (say) an image id or list of ids (of identical images) *first*, and only then get the image src, // you can pass this id or list data to forceImgReload() along with (or instead of) a src argument: just add an extra or replacement parameter for this information to // this function, to imgReloadRestore(), to forceImgReload(), and to the anonymous function returned by forceImgReload() (and make it overwrite the earlier parameter variable from forceImgReload() if truthy), as appropriate. function imgReloadBlank(src) { // ##### Everything here is provisional on the way the pages are designed, and what images they contain; what follows is for example purposes only! // ##### For really simple pages containing just a single image that always the one being refreshed, this function could be as simple as just the one line: // ##### document.getElementById("myImage").src = "/img/1x1blank.gif"; var blankList = [], fullSrc = , imgs, img, i; for each () { // get list of matching images: imgs = theWindow.document.body.getElementsByTagName("img"); for (i = imgs.length; i--;) if ((img = imgs[i]).src===fullSrc) // could instead use body.querySelectorAll(), to check both tag name and src attribute, which would probably be more efficient, where supported { img.src = "/img/1x1blank.gif"; // blank them blankList.push(img); // optionally, save list of blanked images to make restoring easy later on } } for each () if (img.src===fullSrc) { img.src = "/img/1x1blank.gif"; // do the same as for on-page images! blankList.push(img); } // ##### If necessary, do something here that tells all accessible windows not to create any *new* images with src===fullSrc, until further notice, // ##### (or perhaps to create them initially blank instead and add them to blankList). // ##### For example, you might have (say) a global object window.top.blankedSrces as a propery of your topmost window, initially set = {}. Then you could do: // ##### // ##### var bs = window.top.blankedSrces; // ##### if (bs.hasOwnProperty(src)) bs[src]++; else bs[src] = 1; // ##### // ##### And before creating a new image using javascript, you'd first ensure that (blankedSrces.hasOwnProperty(src)) was false... // ##### Note that incrementing a counter here rather than just setting a flag allows for the possibility that multiple forced-reloads of the same image are underway at once, or are overlapping. return blankList; // optional - only if using blankList for restoring back the blanked images! This just gets passed in to imgReloadRestore(), it isn't used otherwise. } // This function restores all blanked images, that were blanked out by imgReloadBlank(src) for the matching src argument. // ##### You should code the actual contents of this function according to your page design, and what images there are on them, as well as how/if images are dimensioned, etc!!! ##### function imgReloadRestore(src,blankList,imgDim,loadError); { // ##### Everything here is provisional on the way the pages are designed, and what images they contain; what follows is for example purposes only! // ##### For really simple pages containing just a single image that always the one being refreshed, this function could be as simple as just the one line: // ##### document.getElementById("myImage").src = src; // ##### if in imgReloadBlank() you did something to tell all accessible windows not to create any *new* images with src===fullSrc until further notice, retract that setting now! // ##### For example, if you used the global object window.top.blankedSrces as described there, then you could do: // ##### // ##### var bs = window.top.blankedSrces; // ##### if (bs.hasOwnProperty(src) return; else delete bs[src]; // return here means don't restore until ALL forced reloads complete. var i, img, width = imgDim height = imgDim if (width) width += "px"; if (height) height += "px"; if (loadError) {} // If you saved  returned blankList in imgReloadBlank(), you can just use this to restore: for (i = blankList.length; i--;) { (img = blankList[i]).src = src; if (width) img.style.width = width; if (height) img.style.height = height; } } // Force an image to be reloaded from the server, bypassing/refreshing the cache. // due to limitations of the browser API, this actually requires TWO load attempts - an initial load into a hidden iframe, and then a call to iframe.contentWindow.location.reload(true); // If image is from a different domain (ie cross-domain restrictions are in effect, you must set isCrossDomain = true, or the script will crash! // imgDim is a 2-element array containing the image x and y dimensions, or it may be omitted or null; it can be used to set a new image size at the same time the image is updated, if applicable. // if "twostage" is true, the first load will occur immediately, and the return value will be a function // that takes a boolean parameter (true to proceed with the 2nd load (including the blank-and-reload procedure), false to cancel) and an optional updated imgDim. // This allows you to do the first load early... for example during an upload (to the server) of the image you want to (then) refresh. function forceImgReload(src, isCrossDomain, imgDim, twostage) { var blankList, step = 0, // step: 0 - started initial load, 1 - wait before proceeding (twostage mode only), 2 - started forced reload, 3 - cancelled iframe = window.document.createElement("iframe"), // Hidden iframe, in which to perform the load+reload. loadCallback = function(e) // Callback function, called after iframe load+reload completes (or fails). { // Will be called TWICE unless twostage-mode process is cancelled. (Once after load, once after reload). if (!step) // initial load just completed. Note that it doesn't actually matter if this load succeeded or not! { if (twostage) step = 1; // wait for twostage-mode proceed or cancel; don't do anything else just yet else { step = 2; blankList = imgReloadBlank(src); iframe.contentWindow.location.reload(true); } // initiate forced-reload } else if (step===2) // forced re-load is done { imgReloadRestore(src,blankList,imgDim,(e||window.event).type==="error"); // last parameter checks whether loadCallback was called from the "load" or the "error" event. if (iframe.parentNode) iframe.parentNode.removeChild(iframe); } } iframe.style.display = "none"; window.parent.document.body.appendChild(iframe); // NOTE: if this is done AFTER setting src, Firefox MAY fail to fire the load event! iframe.addEventListener("load",loadCallback,false); iframe.addEventListener("error",loadCallback,false); iframe.src = (isCrossDomain ? "/echoimg.php?src="+encodeURIComponent(src) : src); // If src is cross-domain, script will crash unless we embed the image in a same-domain html page (using server-side script)!!! return (twostage ? function(proceed,dim) { if (!twostage) return; twostage = false; if (proceed) { imgDim = (dim||imgDim); // overwrite imgDim passed in to forceImgReload() - just in case you know the correct img dimensions now, but didn't when forceImgReload() was called. if (step===1) { step = 2; blankList = imgReloadBlank(src); iframe.contentWindow.location.reload(true); } } else { step = 3; if (iframe.contentWindow.stop) iframe.contentWindow.stop(); if (iframe.parentNode) iframe.parentNode.removeChild(iframe); } } : null); } 

Sonra, səhifənizlə eyni sahədə yerləşən bir görüntünün yeniləməsini məcbur etmək üçün sadəcə olaraq bunu edə bilərsiniz:

 forceImgReload("myimage.jpg"); 

Bir görüntüyü başqa bir yerdən (cross domain) güncəlləşdirmək üçün:

 forceImgReload("http://someother.server.com/someimage.jpg", true); 

Daha mürəkkəb bir tətbiq, yeni bir versiyanı serverinizə yüklədikdən sonra yenidən yükləmə prosesinin başlanğıc mərhələsini hazırlayarkən istifadəçi üçün yenidən yükləmə gecikməsini minimuma endirmək üçün yükləməklə bərpa oluna bilər. AJAX vasitəsilə yüklənirsinizsə və server çox sadə JSON array [uğur, genişlik və hündürlük] qaytarırsa, kodunuz belə bir şeyə aid ola bilər:

 // fileForm is a reference to the form that has a the <input typ="file"> on it, for uploading. // serverURL is the url at which the uploaded image will be accessible from, once uploaded. // The response from uploadImageToServer.php is a JSON array [success, width, height]. (A boolean and two ints). function uploadAndRefreshCache(fileForm, serverURL) { var xhr = new XMLHttpRequest(), proceedWithImageRefresh = forceImgReload(serverURL, false, null, true); xhr.addEventListener("load", function(){ var arr = JSON.parse(xhr.responseText); if (!(arr { proceedWithImageRefresh(false); doSomethingOnUploadFailure(...); } else { proceedWithImageRefresh(true,[arr[1],ar[2]]); doSomethingOnUploadSuccess(...); }}); xhr.addEventListener("error", function(){ proceedWithImageRefresh(false); doSomethingOnUploadError(...); }); xhr.addEventListener("abort", function(){ proceedWithImageRefresh(false); doSomethingOnUploadAborted(...); }); // add additional event listener(s) to track upload progress for graphical progress bar, etc... xhr.open("post","uploadImageToServer.php"); xhr.send(new FormData(fileForm)); } 

Yekun qeyd. Bu bölmə şəkillərlə əlaqəli olmasına baxmayaraq, digər fayl növləri və ya resurslara potensial tətbiq edilə bilər. Məsələn, köhnəlmiş skript və ya css fayllarının istifadəsinin qarşısını almaq və ya hətta yenilənən PDF sənədlərini yeniləmə (yalnız brauzer açmaq üçün konfiqurasiya edildikdə) (4). Metod (4) bu hallarda yuxarıda göstərilən javascriptdə bəzi dəyişikliklər tələb edə bilər.

167
16 марта '14 в 0:12 2014-03-16 00:12 Cavab Doin tərəfindən 16 mart '14 'də 0:12 2014-03-16 00:12 ' də verilir

Alternativ olaraq ...

 newImage.src = "http://localhost/image.jpg?" + new Date().getTime(); 

... göründüyü kimi ...

 newImage.src = "http://localhost/image.jpg#" + new Date().getTime(); 

... Düzgün Cache-Control başlıqlarını geri aldığınızı varsayarsanız, önbellekteki bütün mövzuları devrilmeden brauzerin önbelleğini kandırmaya yetecek kadar. Siz istifadə edə bilərsiniz baxmayaraq ...

 Cache-Control: no-cache, must-revalidate 

... Əgər if If-Modified-Since və ya If-None-Match başlıqları faydaları itirmək, belə bir şey kimi ...

 Cache-Control: max-age=0, must-revalidate 

... həqiqətən dəyişdirilmədiyi təqdirdə brauzerin bütün görüntüyü yenidən yükləməsini maneə törətməlidir. IE, Firefox və Chrome üzərində sınaqdan keçirilib və işləyir. İstifadəsi yoxdur, əgər bu, Safari'de uğursuz olarsa ...

 Cache-Control: no-store 

Xüsusilə öz serverinizdə işləyərkən yüzlərlə eyni görünüş ilə upstream caching up doldurmaq üstün ola bilər baxmayaraq. -)

Güncelle (2014-09-28): Hal-hazırda, Cache-Control: no-store kimi görünür Cache-Control: no-store Chrome üçün Cache-Control: no-store .

166
30 марта '12 в 15:55 2012-03-30 15:55 Cavab 30 mart 'da 12 saata 15:55 ' də veriləcək 2012-03-30 15:55

После создания нового изображения вы удаляете старое изображение из DOM и заменяете его новым?

Вы можете захватывать новые изображения при каждом вызове updateImage, но не добавлять их на страницу.

Bunun bir çox yolu var. Что-то вроде этого будет работать.

 function updateImage() { var image = document.getElementById("theText"); if(image.complete) { var new_image = new Image(); //set up the new image new_image.id = "theText"; new_image.src = image.src; // insert new image and remove old image.parentNode.insertBefore(new_image,image); image.parentNode.removeChild(image); } setTimeout(updateImage, 1000); } 

После получения этой работы, если есть проблемы, это, вероятно, проблема с кешированием, о которой говорят другие ответы.

6
ответ дан BaroqueBobcat 03 июля '09 в 2:44 2009-07-03 02:44

Один из @ заключается в том, чтобы хакерство добавить некоторый параметр запроса запроса, как это было предложено.

Лучший ответ - испустить несколько дополнительных опций в вашем HTTP-заголовке.

 Pragma: no-cache Expires: Fri, 30 Oct 1998 14:19:41 GMT Cache-Control: no-cache, must-revalidate 

Предоставляя дату в прошлом, она не будет кэшироваться браузером. Cache-Control был добавлен в HTTP/1.1, и тег must-revalidate указывает, что прокси-серверы никогда не должны обрабатывать старое изображение даже в условиях смягчения, а Pragma: no-cache не является действительно необходимым для современных современных браузеров/кешей, но может помочь с некоторые жестокие сломанные старые реализации.

4
ответ дан Edward KMETT 03 июля '09 в 1:57 2009-07-03 01:57

 <img src='../showImage.php' id='myimage' /> <br/> <input type='button' onclick="reloadImage('myimage')" /> 
3
ответ дан Mahmoud 01 мая '15 в 18:09 2015-05-01 18:09
 document.getElementById("img-id").src = document.getElementById("img-id").src 

установите собственный src как src.

1
ответ дан Hardik 23 марта '17 в 12:57 2017-03-23 12:57

У меня было требование: 1) не может добавить ?var=xx к изображению 2) он должен работать в междоменном

Мне действительно нравится вариант # 4 в этом ответе с одним, но:

  • у него есть проблемы с надежной работой с crossdomain (и это требует прикосновения к серверному коду).

Мой быстрый и грязный способ:

  • Создать скрытый iframe
  • Загрузить текущую страницу (да, целая страница)
  • iframe.contentWindow.location.reload(true);
  • Повторно установите источник изображения

Здесь

 function RefreshCachedImage() { if (window.self !== window.top) return; //prevent recursion var $img = $("#MYIMAGE"); var src = $img.attr("src"); var iframe = document.createElement("iframe"); iframe.style.display = "none"; window.parent.document.body.appendChild(iframe); iframe.src = window.location.href; setTimeout(function () { iframe.contentWindow.location.reload(true); setTimeout(function () { $img.removeAttr("src").attr("src", src); }, 2000); }, 2000); } 

Да, я знаю, setTimeout... Вы должны изменить это на соответствующие onload-события.

1
ответ дан jazzcat 13 мая '17 в 18:53 2017-05-13 18:53

Попробуйте использовать бесполезную цепочку, чтобы сделать ее уникальным URL:

 function updateImage() { if(newImage.complete) { document.getElementById("theText").src = newImage.src; newImage = new Image(); number++; newImage.src = "http://localhost/image.jpg?" + new Date(); } setTimeout(updateImage, 1000); } 
1
ответ дан Joel 03 июля '09 в 1:46 2009-07-03 01:46

Я использовал нижеследующую концепцию первого связывания изображения с ложным (буфером) url и последующим связыванием его с действительным URL-адресом.

 imgcover.ImageUrl = ConfigurationManager.AppSettings["profileLargeImgPath"] + "Myapp_CoverPic_" + userid + "Buffer.jpg"; imgcover.ImageUrl = ConfigurationManager.AppSettings["profileLargeImgPath"] + "Myapp_CoverPic_" + userid + ".jpg"; 

Таким образом, я заставляю браузер обновляться с помощью действительного URL-адреса.

0
ответ дан Prashanth Shivasubramani 28 июля '17 в 13:17 2017-07-28 13:17
 <img src='someurl.com/someimage.ext' onload='imageRefresh(this, 1000);'> 

Затем ниже в javascript

 <script > 

И так, что это делает, когда загружается изображение, он планирует перезагрузить его за 1 секунду. Я использую это на странице с домашними камерами безопасности различного типа.

0
ответ дан J Fields 16 окт. '17 в 19:29 2017-10-16 19:29

Сильно основанный на коде Doin # 4, приведенный ниже пример упрощает этот код, используя document.write вместо src в iframe для поддержки CORS. Также основное внимание уделяется отключению кеша браузера, а не перезагрузке каждого изображения на странице.

Ниже написано в typescript и использует библиотеку обещаний angular $q , просто fyi, но должен быть достаточно легким для переноса на ванильный javascript. Метод предназначен для жизни внутри класса typescript.

Возвращает обещание, которое будет разрешено, когда iframe завершит перезагрузку. Не сильно проверены, но хорошо работают для нас.

  mmForceImgReload(src: string): ng.IPromise<void> { var deferred = $q.defer<void>(); var iframe = window.document.createElement("iframe"); var firstLoad = true; var loadCallback = (e) => { if (firstLoad) { firstLoad = false; iframe.contentWindow.location.reload(true); } else { if (iframe.parentNode) iframe.parentNode.removeChild(iframe); deferred.resolve(); } } iframe.style.display = "none"; window.parent.document.body.appendChild(iframe); iframe.addEventListener("load", loadCallback, false); iframe.addEventListener("error", loadCallback, false); var doc = iframe.contentWindow.document; doc.open(); doc.write('<html><head><title></title></head><body><img src="' + src + '"></body></html>'); doc.close(); return deferred.promise; } 
0
ответ дан Victor 14 окт. '16 в 1:39 2016-10-14 01:39

Mənim qərarım budur. Çox sadədir. Планирование кадров может быть лучше.

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Image Refresh</title> </head> <body> <!-- Get the initial image. --> <img id="frame" src="frame.jpg"> <script> // Use an off-screen image to load the next frame. var img = new Image(); // When it is loaded... img.addEventListener("load", function() { // Set the on-screen image to the same source. This should be instant because // it is already loaded. document.getElementById("frame").src = img.src; // Schedule loading the next frame. setTimeout(function() { img.src = "frame.jpg?" + (new Date).getTime(); }, 1000/15); // 15 FPS (more or less) }) // Start the loading process. img.src = "frame.jpg?" + (new Date).getTime(); </script> </body> </html> 
0
ответ дан Timmmm 18 июля '16 в 16:33 2016-07-18 16:33

Я решил эту проблему, отправив данные через сервлет.

 response.setContentType("image/png"); response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache, must-revalidate"); response.setDateHeader("Expires", 0); BufferedImage img = ImageIO.read(new File(imageFileName)); ImageIO.write(img, "png", response.getOutputStream()); 

Затем со страницы вы просто передаете ей сервлет с некоторыми параметрами, чтобы захватить правильный файл изображения.

 <img src="YourServlet?imageFileName=imageNum1"> 
0
ответ дан tinymothbrain 07 июня '13 в 18:15 2013-06-07 18:15

Следующий код полезен для обновления изображения при нажатии кнопки.

 function reloadImage(imageId) { imgName = 'vishnu.jpg'; //for example imageObject = document.getElementById(imageId); imageObject.src = imgName; } <img src='vishnu.jpg' id='myimage' /> <input type='button' onclick="reloadImage('myimage')" /> 
0
ответ дан Codemaker 19 марта '18 в 21:16 2018-03-19 21:16

Другие вопросы по меткам или Задайте вопрос