I have a website that has multiple retailer images showing, and these are affiliate links. The issue I have is when I view on a desktop, even with cleared cache, cookies, and other browsers, I can see all retailer images, however when I am speaking with users of my site, they can not see images on desktop only mobile.
The website is www.yourshoppingcentre.co.uk
I have a used the same code through the site to make it easier to add more retailers in the future, and an example can be found here:
<div class="card" style="border: None; padding-top: 5px;">
<div class="thumbnail center well well-small text-center">
<!-- START ADVERTISER: Kelsey Media from awin.com -->
<a rel="sponsored" href="https://www.awin1.com/cread.php?s=3105047&v=19854&q=433993&r=1052665" target="blank">
<img src="images/advertisers/kelsey_media.jpg" >
</a>
<!-- END ADVERTISER: Kelsey Media from awin.com -->
<div class="card-body">
<div class="span12">
<div class="thumbnail center well well-small text-center">
<!-- <button class="btn btn-primary mb-2">Add to Favourites!</button> -->
</div>
</div>
</div>
</div>
</div>
One user has shown me a console screenshot where it shows the images have CSS of Display: None !important;
However again when inspecting the site myself I do not see this CSS and have no concept of how they are seeing this.
So I am guess I am asking a couple of things here, is this issue replicable, and secondly, if so, how to solve, as it is affects a subset and not all users is my understanding.
Appreciate any help!
Thanks!
It's blocked by your adblock probably.
You can see that in your inspect tool :
The images are being blocked by an ad blocker on desktop. If your users disable their ad blocker, the images will show on desktop.
To resolve this, you might consider changing the URL you're using for those images.
Specifically, it seems that uBlock Origin doesn't like advertisers being in the image url.
Related
I am updating my online portfolio with a new website (I grabbed a template off Free-Css.com). When I preview it, it works fine. Once I deploy the website via Firebase, none of my images appear.
All of the images are in the public folder, which is where my hosting is set to. Here is an example of one of the images:
<div class="col-md-6 about-img-div">
<!-- <div class="about-border" data-aos="fade-up" data-aos-delay=".5"></div> -->
<img src="Headshot.jpg" width="400" class="img-responsive" alt="" align="right" data-aos="fade-right" data-aos-delay="0" />
Even if I use the pull pathname, the images still do not appear. Please note that they do appear if I just open the HTML file, but not while deployed. What am I doing wrong? Here is the website: https://evanmny.com
I'm not sure how you create/generate the HTML, but when I look at the network tab when loading your site in a browser I see it tries to read this URL:
https://evanmny.com/Users/evanmullen/Public/city.jpg
That should be:
https://evanmny.com/city.jpg
When I uploaded the html & css parts into webhost, on my browser (Google Chrome) didn't show all of the page, so I deleted cache, media, everything.
Tried to enter again on the website, still wasn't loaded all of the page.
I enter to website by Mozilla, page was there, full loaded.
Asked my friend to enter by chrome to my website, page was full loaded
I tried to enter again by chrome to website, page wasn't full loaded.
Restarted my pc, tried again, page wasn't full loaded.
But why?
That's how only I see from Chrome
That's how everybody sees even if it's from Chrome or another browser
Missing code :
<div class="banner">
<div class="container">
<div class="banner-main">
<div class="col-md-6 banner-left">
<img src="images/ba.png" alt="" class="img-responsive">
</div>
<div class="col-md-4 blc-layer3-grids-3 simpleCart_shelfItem">
<span class="bann-heart"></span>
<h2>OFERTA SPECIALA ! </h2>
<hr> <br>
<h1>Reducere MAJORĂ LA <font style="color:red">UNIVERSAL GAIN FAST !</font></h1>
<hr>
<h2 class="item_price"><strike>$200.00</strike></h5>
<h2 class="item_price"><strong>$100.00</strong></h5>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
I had some similar issue but then i realised that was due to cache.
How i found was, i re-uoloaded the file to another directory and everything worked fine. Sometimes chrome is a bad guy with cache issue.
Probably try deleting cache again or reload the page with shift pressed several times.
Hello I'm new to web design,
I used twitters bootstrap to create a website. Everytime I try to load http://www.taekwondo.uwcs.co.uk/gallery.php on mobile (ios) the browser crashes (chrome) or runs very slowly on that page.
I was wondering how could I fix this issue (how to debug it). Do I have too many images on the page? Do I need to lower the quality of the images?
I'm using lazy loading the images using this plugin (http://www.appelsiini.net/projects/lazyload). Here is the html I have there are about 8 rows of images.
<div class="row">
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/29.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/30.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/31.jpg" alt="">
</div>
</div> <!-- End of row -->
jQuery on the page
$(".img-responsive").lazyload();
Thanks in advance
The problem is that you load all the images at once because they are all in the viewport of the user if he opens the page. You should only load images which are currently visible for the user.
For that you can add a min-height (this is not the best solution for responsive websites) to your rows (e.g. min-height: 50px). A better solution is to load the first and maybe second row without lazy loading. The rest of the rows can be lazy loaded. Then the performance problem should be solved ;)
The second thing is, that I wouldn't use a jQuery plugin, because for a such tiny functionality like lazy loading you don't need such a big library which costs performance too.
I prefer a lightweight and more efficient plugin like justlazy. In the example you can see, that images are only loaded, if they are visible for the user. If you load your site, all images are loaded.
You can use justlazy as follows:
1. Define a placeholder:
<span data-src="path/to/image" data-alt="some alt text"
class="justlazy-placeholder">
</span>
Good at this solution is also that google don't index your load-gifs. If you want to seo optimize it, you can use an img with a small image as src-attribute instead of the span for the placeholder.
2. Register lazy loading via javascript
Justlazy.registerLazyLoadByClass("css-class");
I have searched a lot, but I cannot find a similar problem on the net. Or probably, I have my keywords wrong, but here's the problem:
I created a website which has a twitter twit button, and it works in all browsers, in all languages (that we've checked). So here's the predicament, we have foreign bought laptops and when they click on this button, instead of the usual twitter pop-up window allowing you to twit the page content, it gives a "Page not found" text on the pop-up.
I have declared UTF-8, i have set the html lang document to that specific language, but it's not working.
Here's the code for the button:
https://twitter.com/share?url=google.com&text=【CNE1%20５周年記念】特別サイトをシェアして超豪華特典付きの１週間留学を当てよう！%20詳細はコチラ:http://www.cne1jp.com/campaign/%20＠CNE1Japan%20#cne1'>
<div class="twit">
<div class="twitlogo">
<img src="images/twitterLogo.png" />
</div>
<div class="twitcon">
<!-- <p>Twit the love on Twitter!</p> -->
<!-- <p>Twitterでつぶやく！</p> -->
<div class="twc-t">
<div class="twc-tt">
Twitterで<br>
ツイート！
</div>
</div>
</div>
</div>
</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='//platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>
Would greatly appreciate any insight on this. Thank you in advance!
I have this htmls on a page which renders a photo album.
As you can see that there are 3 <img> tags.
The first two is under <li> which has display:none. But the last image is visible as it has style=''.
My question is: during page load will the first 2 images be loaded with the last image even if their container has display:none?
<div class="gallery">
<ul id="PhotoContainer">
<li style="display: none;" name="DSC01100.JPG" id="4ee01301602fdd0efc35683e">
<img src="http://site/Files/Get?fileId=4ee01306602fdd0efc356844"></li>
<li style="display: none;" name="DSC01102.JPG" id="4ee01308602fdd0efc35685f">
<img src="http://site/Files/Get?fileId=4ee0130a602fdd0efc356864"></li>
<li style="" name="DSC01101.JPG" id="4ee01306602fdd0efc35684f">
<img alt="my description for this image" src="http://site/Files/Get?fileId=4ee01308602fdd0efc356855"></li>
</ul>
</div>
If by "loaded" you mean downloaded, then yes. Resources with display: none styling are still fetched, just not rendered. In fact, this is a valid image pre-loading technique, as discussed in this article.
To verify, you can load your page and look at the downloaded resources tab in Chrome Developer Tools or Firebug.
It depends on which browser is loading the web page, I know google chrome loads all images, I expect most other browser are doing the same...
All images will get loaded into the cache, and technically the webpage. However, the css hides the 2 images before they come in contact with the human eye.