There are many image tags across the application and ng-src is dynamic in each image like:
<div ng-controller="load_product">
<img ng-controller="image_controller" ng-src="{{product.image}}" />
</div>
<div ng-controller="load_brand">
<img ng-controller="image_controller" ng-src="{{brand.image}}" />
</div>
Now I want to implement lazy loading of images using image_controller used on each image. For this, there are two events available in image_controller when image load or when error occurs on image loading using
$($element).load(function () {......})
$($element).error(function () {......}).
For lazy loading, my approach is to replace src of the image to a dummy 1px image if it is not in the viewport and store original src in another attribute lazysrc and change to original src if the image is in viewport i.e. copy value from lazysrc to src if the image in the viewport.
But for this i need a event when ng-src of image is resolved but request for image is not send by browser.
Note: load_product and load_brand controllers load the data after some events. So, I need to copy the src to lazysrc when data is loaded , ng-src is resolved but request of the image is not sent. I want to stop this request after data loading and ng-src resolved.
I don't want to change the HTML in any case as it is a thousand of pages application.
Related
I'm trying to apply lazy loading to the images on my website when I apply it on a static image through a URL or assets, this attribute works perfectly
But, when I get images from my database and apply this attribute to it, for some reason, it doesn't work
Example of static image that does work
<img loading="lazy" src="{{asset('img/minus.png')}}"/>
Example with dynamic images from my database that DOES NOT work
#foreach($product_all->product_images as $product_image_all)
<img loading="lazy" id="image-{{$product_all->id}}" src="{{url('product/'.$product_image_all->image)}}">
#endforeach
My method to get the images from the database
public function getImage($filename) {
$file = \Storage::disk('products')->get($filename);
return new Response($file, 200);
}
Where is the fault? Why can't I get it to work?
Solved.
The problem was that I had to also put loading = "lazy" to the images that I was loading above because some were repeated
I have a vue page which uses v-html to place an html content inside a <div> as follows:
<div v-html="noDataMessage">
</div>
And the data of noDataMessage is set in created() lifecycle hook of vue.
created() {
this.noDataMessage = "<img src='../assets/Content/img/Myfav_empty.png' width='35px' height='35px'>";
}
The html tag is showing properly, but it is not able to fetch the image.
I tried to load the image separately to see if image path is correct, and got the image.
Am I missing anything particular to vue.js or v-html in particular?
The issue is in the src url you are using, the src url root is the public directory.
For example, if you have all your images in public->images directory then your code will look like this:
this.noDataMessage = "<img src='images/Myfav_empty.png' width='35px' height='35px'>";
It seems perfect only.
I have implemented the same way to fetch the image, Here I can see the image.
Please check the path once again.
You can check below example where I have tried to implement same way
:http://jsfiddle.net/suprabhasupi/eywraw8t/491005/
I'm working with TinyMCE editor with some old webpage content.
All HTML content could contain "links" to images in format ".. <img src="##IMAGE:1234##"/> ..".
I need to show image in HTML preview, but in code it has to stay in format "..<img src="##IMAGE:1234##"/>.."
I know URL to download/inline all images =>
http://example.com/images/1234
Do I need to parse editor content, replace IMG src by URL + ID from original IMG src (##IMAGE:1234##).
Is there some way, how to have in HTML code mode something like this "..<img src="##IMAGE:1234##"/>..", but in preview mode have image displayed?
Thanks
TinyMCE relies on the browser to render the HTML that you give to the editor. As the current src you are providing is not valid the image won't show.
What I would suggest is to use a data-xxx to store the value you need and programmatically set the src attribute when you place the content into the editor.
For example...
You might store the image tag in your database as <img data-imgsrc="##IMAGE:1234##" />. When you get ready to load the content into the editor add the src attribute to the image tag so you end up with <img data-imgsrc="##IMAGE:1234##" src='http://example.com/images/1234' />. This allows the editor to render the images.
When you go to save the HTML content back to the database you can remove the src attribute from any image that also has the data-imgsrc attribute (assuming you need to do this for some reason).
Currently i using a header banner with theme option, where my banner code looks like
<img src="#" alt="" title="" />
that i can use a single image in my above banner.
But now my advertiser want me to use two images instead of one (advertise link remain same), where images will be change randomly each time page is loaded/refreshed.
Please, help me on this issue.
Thanks!
using php rand(1,2); function that return 1 or 2 , then using this random value to show image url on img src.
this may help
https://wordpress.org/support/topic/random-imagelogo-on-header
Pretty simple question:
Can I force a browser to not download any images or other resources if they are display:none, but then, of course download when display is switched to inline?
Here is the concept: A lecture presentation with many slides as images all set to display:none by default then changed to display:inline when the video reaches a certain time index. The browser still tries to load all of the images even though they are not displayed which might cause a hang on the video or elements that should load after the slide images.
I have a series of these:
<figure class="lectureNotCurrent" data-start="0" data-end="259">
<a href="img1_large.JPG" target="_blank">
<img src="img1_large.JPG" class="lectureSlidesImg" /></a></figure>
EDIT - SHOULD WORK?
<img data-src=/path/to/img.png src="">
//js
loadNextImages() {
document.querySelectorAll("#slidesContainer footer").map(function () {
this.getElementsByTagName('img').src = this.getElementsByTagName('img').dataset.src;
delete this.dataset.src;
});
}
Update your html so that the hidden images don't have src (or have a one transparent pixel file as the source, for example) and use data-src and change the src when it's displayed:
<img data-src=/path/to/img.png src="">
//js
loadNextImages() {
document.querySelectorAll("#container img").map(function () {
this.src = this.dataset.src;
delete this.dataset.src;
});
}
Here is what I ended up doing.
HTML
<figure class="lectureNotCurrent" data-start="0" data-end="259">
<a href="img1_large.JPG" target="_blank">
<img data-src="img1_large.JPG" src="" class="lectureSlidesImg" /></a></figure>
In the function that runs the timings for the slides I added the variable:
var imgNames = document.getElementsByClassName('lectureSlidesImg');
I then added this statement in the section of code (a 'for' loop) that applies display:inline to the figure tags at the correct moments according to the video's current time.
imgNames[i].src = imgNames[i].getAttribute('data-src');
So in addition to displaying the figure tag in question it will also take the data-src value for the image in question and insert it in the src attribute. The image then loads.
There is a lot of power behind the data-* custom attributes. Glad I learned about those.
One would think, however, that display:none should prevent loading the content unless the display is changed.