I'm building a image-intensive web-page. I just popped in all the images and the site got really slow. Not just loading but also browsing etc.
Is there any good way to tell a browser that images are not necessary to load yet? For example in css:
display:none
or maybe instantiating the images with javascript somehow.
Currently all images are specified in the html, if possible I would like to keep to like that.
<img id="myID" src="about:blank" alt="" />
document.getElementById("myID").src="/image1.jpg";
I have to admit though, I have not used a blank image tag before, but If needed I have always appended an image to a container dynamically
document.getElementById("myDivID").appendChild('<img id="myID" src="image1.jpg" alt="" />');
Related
so I have a database with user uploads. Users can either upload images, or videos.
On an admin page, these videos/images should be diplsayed.
What works is the following:
<repeat group="{{#userUploads}}" value="{{#upload}}">
<div class="col-sm-4">
<video style="width:100%;" controls>
<source src="/{{#upload.path}}"/>
Your browser does not support the video tag.
</video>
<img src="/{{#upload.path}}"/>
</div>
</repeat>
Yes, I'm using Fat Free Framework, but doesn't change any behaviour here, so it doesn't really mind for the quesiton.
Now as mentioned, this works, but also displays both (working video and not working image or working image but not working video)... I've tried nesting the image into the video tag, however, this doesn't work either.
Is there any way I could reach the effect, that depending on the path (respectively the image filetype), I display the correct thing (image or video)? My only idea so far is checking the src of each tag with JS after creation and then hiding the thing, where the filetype doesn't match, however, this seems like a pretty ugly solution for me (first displaying everything, then checking for various filetypes, where I could forget things, etc.)
Use php exif_imagetype() function to test if it's a image. Although I would suggest to do it before storing to database.
Any guidance is much appreciated... this is how i'm doing it.
Is there another easier way I should be displaying an SVG.
Keep in mind all I have at my disposal is a text box that allows HTML...
<img src="https://drive.google.com/uc?export=download&id=1zo2ZJb18abw4ejafQ3LaW5Lv_aZgX6r9" onerror="this.src='https://drive.google.com/uc?export=download&id=18r53wPextHZJ0iPJQRzhJixMEZsjjtic' alt="You don't have to be great to start, but you have to start to be great" width="100%" height="100%" ">
I tried to put in a redundancy png but that didn't work either :(
You can remove export=download from you url i.e. https://drive.google.com/uc?id=1zo2ZJb18abw4ejafQ3LaW5Lv_aZgX6r9 to prevent a forced download.
I'm loading images on my site using js library jquery lazyload2, to display images I use the code below:
<img class="lazyload img-fluid" src="{{$product->getEncodedThumb()}}" data-src="{{asset($product->getMainImage())}}" alt="{{$product->name}}">
Everything works fine so far, but I need to make the version of my site for users who don't have javascript enabled, how would I approach this? I could just replace all src tags on lazyloaded images with high quality images, but it would completely miss the point, as it would always download high quality images without lazyloading, how should I redesign my structure to allow for javascript lazyloading & noscript standard loading? Do I need to create completely different layout for noscript users?
You can use the new built-in lazy loading in HTML
Just with adding loading="lazy" attribute to your
like that:
<img src="https://test.photos/300.jpg" loading="lazy" />
Here you can see browser support:
https://caniuse.com/#feat=loading-lazy-attr
Usually img tag is followed by noscript tag with embedded original image, i.e.
/* hide lazyload images for disabled js */
.lazyload-hidden {
display: none;
}
<img class="lazyload lazyload-hidden img-fluid"
src="{{$product->getEncodedThumb()}}"
data-src="{{asset($product->getMainImage())}}"
alt="{{$product->name}}">
<noscript>
<img class="img-fluid" src="{{asset($product->getMainImage())}}" alt="{{$product->name}}">
</noscript>
// show lazyload images
$('img[data-src]').removeClass('lazyload-hidden');
I've been using the same lazy loading script for years and after checking out my blog today, it's suddenly not working, no images are showing at all. I know it's the script because if I just put a basic image tag in, it works fine.
Honestly, the JS file is a mess as most of it is minified and I can't pick out just the lazyloader script. JS file is situated at:
https://helloarchie-helloarchie.netdna-ssl.com/themes/tootsweet/js/cbpHorizontalSlideOutMenu.min.js
Example URL where images should display (All images at top ARE working, but nothing underneath 'Headers-' etc. near bottom of page, because those are set to lazyload): https://helloarchie.co/design/
Here's the HTML I've always used to display image:
<img class="one img-responsive" alt="" data-src="https://helloarchie-helloarchie.netdna-ssl.com/img/rapeseed-field/family-two-young-brothers- yellow-seed-field-photoshoot-bobochoses-filemonkid-mum-nan-play-flowers- jump6.jpg" src="https://helloarchie-helloarchie.netdna-ssl.com/img/grey.gif" />
<noscript><img class="image-asset" src="https://helloarchie-helloarchie.netdna-ssl.com/img/rapeseed-field/family-two-young-brothers-yellow-seed-field-photoshoot-bobochoses-filemonkid-mum-nan-play-flowers-jump6.jpg" alt=""></noscript>
It's a total nightmare as I have thousands of images on my blog and I'd have to manually configure each one if I can't get this working. Can anyone help?
I have the following html:
<div class="compPhoto compPhoto3">
<img class="lazy" src="" alt="" data-original="http://distilleryimage4.s3.amazonaws.com/c77631323e0411e394d322000a1f8c09_8.jpg" width="289" ;="" height="289">
</div>
I am actually using jQuery lazy load to load the images, however in the src tag I decided not to use an image, instead I just want to use a background. However then it gives me weird frame around the img:
I tried setting border: none, but it has no impact.
Any ideas on removing the border?
The grey border will be shown by certain browsers to denote that the image cannot be found. Because of this, you will not be able to remove it using CSS.
You shouldn't really be using an <img> tag like this. If you just want to use background-images, why not use a <div> or another block tag.
I disagree with Tim Ebenezer who wrote above. It is possible to hide the frame if the img tag is to add the style "border-style: none", but it is imperative that the src="" tag is at least empty, then the frame is hidden in Google Chrome, Firefox, EGDE, IE 10-11! But unfortunately it will not work for safari on MacOS and iOS.