I would like to speed up my Shopify website load time by lazyloading my images. The problem is that I cannot locate the specific image files in the code in order to add the class= "lazyload" to it.
Here is what I have tried:
I have pasted this code at the top of the product-template.liquid page:
<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>
And then adding the code: class= "lazyload" to the end of any chunk of code that I think looks like an image, but it doesn't work.
Product-template.liquid page 1 page 2 page3
Would anyone be able to help me understand where this code goes and how to identify where I need to put the code to lazyload an image?
I see that you're using <img src="..." /> . For lazyload to work, change it to <img data-src="..." />
And the better alternative is to implement native lazy loading. Just add loading="lazy" to your images and voila.
Ex: <img src="https://dummyimage.com/600x400/000/fff" loading="lazy" />
More details & a combined use with lazyload library - https://web.dev/native-lazy-loading/ & https://caniuse.com/loading-lazy-attr
In the online code editor, add the below code before close tag.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}
Add the class lazyload to images that should be lazy loaded. In addition, change the src attribute to data-src.
<img class="lazyload" data-src="image.jpg" />
Instead of
<img src="image.jpg" />
Related
I have I think a small issue but I can't resolve it since more than 2 hours ...
I have a VueJs application and I'm trying to display an image that came from an API.
In my register.html I have that code :
<img :src="'./assets/' +nation.drapeau"/>
When I check the browser I see the correct path './assets/images/drapeaux/AFC/Australie.png' but nothing is displayed !!!! Why ? My path is not ok ?
What I'm doing wrong ?
This is the structure of my VueJs folder
If you use dynamic src, you have to use require. It is handled by webpack and it knows to put it in dist after build.
<template>
<div>STATIC IMAGE</div>
<img src="./assets/logo.png" />
<div>DYNAMIC IMAGE</div>
<!-- <img :src="'./assets/logo.png'" /> IT DOESN'T WORK-->
<img :src="require('./assets/logo.png')" /> <!-- IT WORKS-->
</template>
Demo:
https://codesandbox.io/s/dazzling-leftpad-i3stg?file=/src/App.vue:0-281
Another source:
How to import and use image in a Vue single file component?
Try using require since it's a dynamic src
<img :src=require(`./assets/${nation.drapeau}`)/>
The response , thanks guys :
<img :src="require('#/assets/' +nation.drapeau)"/>
I have implemented lazy load and render hooks using the Hugo guide. However, it works locally but does not work when deployed to Netlify.
Why is that happening?
My markdown is such:
In chrome dev tools it renders as:
<img src="path" alt="Title" loading="lazy" width="100%" height="auto">
My render template is placed here: themes\red\layouts_default_markup\render-image.html
The template code is:
<!-- layouts/_default/_markup/render-image.html -->
{{ $img := imageConfig (add "/content" (.Destination | safeURL)) }}
<img
src="{{ .Destination | safeURL }}"
alt="{{ .Text }}"
loading="lazy"
width="100%"
height="auto"
/>
I found the issue. In netlify I explicitly set the hugo version to a very new release as below and the problem was solved.
What do I have to do to use a nuxt-link as an image?
When I display an image in Vue, I usually do:
<img src="~assets/icons/filterLinkButton.svg">
but when I do the same with a nuxt-link, the path to the file does not get evaluated.
# this is not working
<nuxt-link
tag="img"
src="~assets/icons/filterLinkButton.svg"
to="/locations">
</nuxt-link>
What can I do to solve this?
EDIT:
It works though if I do:
<template>
<nuxt-link
:src="image"
tag="img"
to="/locations">
</nuxt-link>
</template>
<script>
import image from '~/assets/icons/filterLinkButton.svg'
export default {
data() {
return {
image: image
}
}
}
</script>
You can do without a variable in data.
# this is working
<nuxt-link
tag="img"
:src="require('~/assets/icons/filterLinkButton.svg')"
to="/locations">
</nuxt-link>
According to this link, the tag prop is deprecated in vue-router 4 and should be replaced with v-slot. So arkadij_ok's answer would now look like this:
<nuxt-link
v-slot="{navigate}"
to="/locations"
>
<img
:src="require('~/assets/icons/filterLinkButton.svg')"
role="link"
#click="navigate"
/>
</nuxt-link>
I have used an image as a nuxt-link by placing the image inside of the nuxt-link tag.
a screen shot of a nuxt-link with an img
The html viewed with chrome dev tools
Well according to the documentation if you're using webpack you can use that alias (~assets) inside your css files, but apparently you need to use the ~/ version on your template, also take a look at the approach bellow using the static folder I think that suits you better since the asset you used in your question can be placed in the static folder and get rid of the alias
I am having trouble displaying images in my Vue CLI project.
Here is what I have going on. This vue file accesses a json file with a few references to the individual Eyewear objects, all that works. I have references to the image I am trying to access in the json file. And with the current code, I can see the correct image reference in the browser, but it does not load the image. Is it something to do with webpack or another loader needing to load the image file?
<template>
<div>
<h1 id='callout'>Select Your Eyewear</h1>
<div id='item' v-for='item in items' :key=item.id>
<img :src='`..${item.images.frontal}`' alt='eyeware' />
<ul id='itemLIist'>
<li >
{{ item.brand }}
</li>
<li>
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import items from "../assets/eyewear.json";
export default {
name: "ItemList",
data: function() {
return {
items: items.eyewear
};
}
};
</script>
<style scoped>
</style>
I don't know this works for you or not. But in my case providing the full path of the image works for me. in your screenshot reference starting from "../assets" instead of that try something "src/assets" (Full path with out dots)
and for make this simple, first just try to hard code full path src to a image tag and see whether it's working or not.
and let me know if this works for you. =)
I am using django and jssor.
When i use jssor slideshow transition, image will disappear then show up if i use images in 'media' folder. If i use images in 'static' folder there won be.
Could someone tell me why ?
Django Model:
class Banner(models.Model):
image = models.FileField(upload_to='Banner/%Y_%m_%d')
link = models.TextField()
Django template:
...
<div ...>
{% for banner in banners %}
<div>
<a href={% url banner.link %}>
<img src="{{ banner.image.url }}">
</a>
</div>
{% endfor %}
</div>
...
JS:
var _SlideshowTransitions = [{...some setting ...}]
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
},
This is most likely a problem of chrome. Every time when a new image element created in the document dynamically, it will load the image again event the image is already loaded in the same page. If your resource is not cache enabled for client side, it is high performance consuming.
To enable cache for client side, it is an option of your server, or controlled by program.
So, browser caches resources come from 'static' folder and not for resources come from 'media' folder.