76335

Chrome does not display images on Refresh

Question:

I am using roundabout jQuery plugin and it is working good on all browser except Chrome.

When I Inspect Element, I find all source code and parameters are correct and well defined.

Now, when I click on URL and hit Enter images shows up and when i refresh with F5 key images are not displaying.

I tried researching over Google and forums of chrome, i could not get that..

My current configuration tested on

<pre class="lang-none prettyprint-override">Chrome : Version 26.0.1410.64 m OS : Windows XP SP2, Windows 7 x86 Ultimate

And below are few workouts I tried,

<pre class="lang-none prettyprint-override">1. Refreshed cache and deleted caches 2. Images path are correct 3. Making header content-type to text/html, text/css, and content-length to 1024 4. Used Other operating system and previous version of chrome 5. checked console if there any errors in JavaScript (Result : empty console, i.e. No Errors or warnings)

And i have added an image just for reference (may not be helpful)

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/kqVUH.png" data-original="https://i.stack.imgur.com/kqVUH.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

<h2>Updated : code</h2> <ul id="treemenu1" class="r-ul"> <li><img src="images/img/img1.png" /></li> <li><img src="images/img/img3.png" /></li> <li><img src="images/img/img2.png" /></li> <li><img src="images/img/img4.png" /></li> <li><img src="images/img/img5.png" /></li> <li><img src="images/img/img6.png" /></li> <li><img src="images/img/img7.png" /></li> <li><img src="images/img/img9.png" /></li> <li><img src="images/img/img10.png" /></li> <li><img src="images/img/img11.png" /></li> </ul> <script> $(document).ready(function() { $('ul').roundabout({ 'autoplay':true, 'duration':3000 }); }); </script> <h2>Added jsfiddle</h2>

<a href="http://jsfiddle.net/Twy8e/" rel="nofollow">http://jsfiddle.net/Twy8e/</a>

And theres no problem is jsfiddle working on chrome.. and its working on chrome.. but when i n production it doesnot display images

Answer1:

Oh, I even used this pluggin and lot of problem and finally i got the solution.

set a paramenter 'debug':true and you will see empty div elements with all styles/css.

$(document).ready(function() { $('ul').roundabout({ 'autoplay':true, 'duration':3000, 'debug':true }); });

Now when you refresh, see the style/css then you will find height and width of div elements as 0px.

And set min-height and min-weight to css mentioned below or values you want and check that out..

I have seen you fiddle, i think that.. this css

<pre class="lang-css prettyprint-override">li img { width: 100%; }

you need to change that to

<pre class="lang-css prettyprint-override">li img { min-height: 250px; /* or whatever */ min-weight: 350px; /* or whatever */ }

And after you resolve, remove debug option or set it to false.

May be this should work for you, as i have got this problem and got the solution. I think its not the problem of chrome.. its pluggin thats not triggering the height and width of elements

Answer2:

When you generating images from server side, try to add random number to the source of images as look like <li><img src="images/img/img3.png?X" /></li> with X is random number.

For example:

<li><img src="images/img/img3.png?1" /></li> <li><img src="images/img/img2.png?2" /></li> <li><img src="images/img/img4.png?3" /></li>

Answer3:

use and try Tilled Characters or ../

<li><img src="~/images/img/img1.png" /></li>

or

<li><img src="../images/img/img1.png" /></li>

And see this some other discussions

<a href="https://stackoverflow.com/questions/12227716/css-background-images-not-loading" rel="nofollow">CSS Background Images not loading</a>

<a href="https://stackoverflow.com/questions/11950306/chrome-background-images-not-rendered-after-refreshing-page-javascript-redire" rel="nofollow">Chrome: background-images not rendered after refreshing page + javascript redirect</a>

or <strong>Use $(window).load() instead of $(document).ready()</strong>

<script> $(window).load(function() { $('ul').roundabout({ 'autoplay':true, 'duration':3000 }); }); </script>

Answer4:

I recently did have the same problem of loading images from the server-side, I made few changes with code but nothing seems helpful.

So I did a small trick of changing the image file-type from png to jpeg and everything went smooth from there.

Recommend

  • What is the use of the SHT_NULL section in ELF?
  • C: Custom strlen() library function
  • How can I stop my python script when another python script is running?
  • SQL Server: +(unary) operator on non-numeric Strings
  • Create a multiple screen android application
  • Does the Azure table storage API cache results?
  • Overlapping controls in Windows XP
  • Adjust width of select element according to selected option's width
  • Why Encoding.ASCII != ASCIIEncoding.Default in C#?
  • Ionic 2 storage is not cleaning up on uninstall - Only for signed APK
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • AES padding and writing the ciphertext to a disk file
  • Modifying destination and filename of gulp-svg-sprite
  • MySQL WHERE-condition in procedure ignored
  • Deserializing XML into class C#
  • Updated Ionic CLI but shows previous version (Windows)
  • Timeout for blocking function call, i.e., how to stop waiting for user input after X seconds?
  • Web-crawler for facebook in python
  • retrieve vertices with no linked edge in arangodb
  • How to get icons for entities from eclipse?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • How to include full .NET prerequisite for Wix Burn installer
  • Proper folder structure for lots of source files
  • trying to dynamically update Highchart column chart but series undefined
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • How do I configure my settings file to work with unit tests?
  • Change div Background jquery
  • How does Linux kernel interrupt the application?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • apache spark aggregate function using min value
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize