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
Related
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.
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
I was given a task to pull images from an html page using only jQuery and nothing else.
The html page is a page with a lot of tables and a lot of different png's. In about 400 lines of html, there are about 80 images. My job is to get all of the images with a certain domain to the bottom of the page (the div class="code"> section), so I can then manually go through them to save them.
So far I am able to get the src of all of the images, but I am not sure how to get all of the actual images. I was thinking if I was to save the source in a variable, I could just redirect the each loop to an img tag and feed it the image source. So far it just returns a broken img link, so I think I have the right idea, but not the right code.
Here is my js
$(document).ready(function(){
$("img[src*='tieks']").each(function() { // src* so I only get certain images
imgsrc = this.src;
$(".code").append(imgsrc);
});
});
This is the code section
<div class="code">
<img src=imgsrc>
</div>
Does anyone know how I could tackle this?
If all you want is to clone all the images into one container:
$('.code').append( $("img[src*='tieks']").clone() );
clone() API Docs
The trick is to create a new element and append it to your div or whatever you prefer.
var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');
This is also answered in this thread from where the example above origins: How to create a new img tag with JQuery, with the src and id from a JavaScript object?
you are trying coding is correct.you are taken only image source.If u want to take all the original images and append to div with class 'code',you will try to change
$("img[src*='tieks']").each(function() {
$(".code").append(this);
});
just try it.
Im working on the products page or an ecommerce site and currently there are 3 small images and one large image. the three small images are clickable and when the user clicks one of the images the larger image is changed to show that image using:
onMouseDown="document.Image.src=/img1.jpg;"
This works fine. The trouble I am having is when trying to link this with colorbox. What I would like to do is for the user to click one of the smaller images and then the larger image is loaded then when they click that larger image the colorbox function is called and the image is shown in the colorbox popup. Is there anyway to do this?
Currently my code shows as follows:
jQuery("a.largeImgPop").colorbox({opacity:0.4, rel:'largeImgPop', photo:true});
<a class="largeImgPop" href="/img1.jpg">1</a>
<a class="largeImgPop" href="/img1.jpg">2</a>
<a class="largeImgPop" href="/img1.jpg">3</a>
<img src="/img1.jpg" name="Image" alt="Image 1" />
Is this possible?
A couple of things.
Why not skip right to the colorbox after clicking the small image?
But assuming you have one large placeholder image and several thumbnails swapping them, this is how I would do it.
Give this an id. You can set the size to whatever you need.
<img src="/main.jpg" id="mainImg" name="Image" alt="img_placeholder" />
Try using the .click() && .live() functions with jquery.
Note: live() has been deprecated in later versions of jquery. try using on() if that doesn't work.
$(function(){
$('.largeImgPop').click(function(){
var img = $(this).attr('src');
$('#mainImg').attr("src", img);
});
$('#mainImg').live('click',function(){
$(this).colorbox({opacity:0.4, rel:'largeImgPop', photo:true});
});
});
I don't know if this will work...also I don't know why you would load one image to another. You never specified your image directory structure. You could add rel="/images/larger/img1.jpg" and get that.
And change to.
var img = $(this).attr('rel');
$('#mainImg').attr("src", img);
<img src="/img1.jpg" name="Image" alt="Image 1" onMouseDown="myFunction()"/>
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.